理解响应式布局

响应式布局是为了兼容各种设备，手机，平板，电脑等，响应式布局是为了适应各种设备，根据各种设备使用的屏幕大小呈现不同的网页，自动调整布局

响应式布局的做法：1.首先，在网页代码的头部，加入一行[viewport元标签]   <meta name="viewport" content="width=device-width, initial-scale=1" />  

                                width=device-width：网页宽度默认等于屏幕宽度

                                原始缩放比例（initial-scale=1）为1.0

                                 2.由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽                                   度 的元素。

                                 3.CSS代码不能指定像素宽度；  只能指定百分比宽度

                                 4.相对大小的字体 ；字体也不能使用绝对大小（px），而只能使用相对大小（em）。

                                                      5.流动式布局：各个区块的位置都是浮动的，不是固定不变的；float的好处是，如果宽度太                                      小， 放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向                                                     overflow（溢出），避免了水平滚动条的出现

Media Queries“媒体查询” ，在CSS3中我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页 面  

screen：指的是一种媒体类型

and：被称为关键词，与其相似的还有not,only

（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件

媒体类型(Media Type)：1、link方法引入 2.xml方式引入 @import方式引入4、@media引入（我们学 习到的）

最大宽度Max Width