＜CSS＞响应式布局

这里我们使用二级导航栏为大家做一个响应式布局。

先解释一下响应式布局的定义：就是当页面缩小到一定尺寸时，内容的布局和文本样式会发生改变。

超小屏幕（手机）：（<768px）；

小屏设备（平板）：（>=768px ~ <992px）；

中等屏幕（桌面显示器）：（>=992px ~ <1200px）；

宽屏设备（大桌面显示器）：（>=1200px）；

这里我们就做一个缩小到768px后的变化，其他尺寸都同理，可以自行发挥；如有不会二级导航栏的，可以观看我发布的二级导航栏篇章，内容很详细，接下来我们开始实操：

一、先准备前置工作

创建好html文件和css文件（外部样式表）后，在html的head里面使用link标签关联起来，注意，这次的关联我们需要加一条代码：

media="all and (max-width:768px)" 

我们创建俩个css文件，第一个b是普通布局，第二个bb是写响应式布局

这句话的意思就是当页面宽度达到768像素及以下时，网页内容所发生的变化；all的意思就是所有设备，这是最常用的，一般使用这个就可以，还有一种常用的是screen，这个是彩色电脑屏幕，其他的基本不用，大家记住这俩个就可以了；and的意思是并且，还有三种词：only限定一种设备、not排除某种设备、逗号设备列表，它们的左右必须有空格，否则会无效，and也是最常用的。

二、布局二级导航栏

这里我之前的文章讲过，有很详细的讲解，这里就不过多赘述了，大家直接看代码和效果图：

 

 这是鼠标放在一级第二个上，再放在二级的第二个上的状态：

 三、制作响应式

我们在bb.css文件中开始编辑：

 以上就是我们我们缩小页面到768px时发生的变化：

clear：both；的意思是让li标签不再浮动，这样它就可以回到默认布局，形成竖着的；

position：relative；的意思是相对定位，如果不加偏移值就会原地不动，不会影响其他，加这条数值是因为我们要给子标签li使用绝对定位，使用绝对定位的父元素必须加定位，否则绝对定位就会根据页面定位，加了后就会根据父级定位；

position：absolute；绝对定位，可以定位到任意位置。

效果图：

 鼠标放在二级上的效果：

这就是我们响应式布局的简单制作，很简单，大家只要把应用响应式的代码记住就行，其他的大家随便玩就好，根据自己需求尽情制作，可以加入一些动画，让二级导航栏更润一点，这里具体可以参考我的上一篇文章。

注：如果使用内部或行内样式表时，需要在 @media all and (max-width:768px){} 这串代码的花括号里面编辑。