Web响应式布局（RWD）

一、允许网页宽度自动调整

<meta name=“viewport” content=“width=device-width; initial-scale=1.0” />

二、不使用绝对宽度，使用百分比或width:auto

三、使用相对大小字体 em、rem

四、使用流动布局float

五、核心：使用CSS3 Media Query(媒体查询)

• 对不支持Media Query的浏览器，先调用：

<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

• 语法：@media 设备名 and /only / not （选取条件） 

only	限定某种设备类型
and	与，连接设备名与选择条件、 选择条件1与选择条件2
not	排除某种设备
，	多个设备

例子：