一、允许网页宽度自动调整
<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 | 排除某种设备 |
, | 多个设备 |