正文
css3 响应式布局 Media Query
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.什么是响应式布局？
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简单说就是一个网站能够兼容多个终端。
2.响应式布局的优缺点？
优点：面对不同分辨率设备灵活性强，快捷解决多设备显示适应问题
缺点：工作量大；会出现隐藏多个无用元素加载时间延长；一定程度上改变了网站原有的布局结构
在页面的<head>标签中加入这句：
<meta name="viewport" content="width=device-width; initial-scale=1.0">
meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
参数设置：
width(viewport的宽度)
height(viewport的高度)
initial-scale(初始的缩放比例)
maximum-scale(允许用户缩放的最大比例)
minmum-scale(允许用户缩放的最小比例)
user-scalable(用户是否可以手动缩放)
3.用法
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px), only screen and (max-device-width: 480px)" href="small.css"/>
可用设备名参数：
| 类型 | 解释 |
| screen | 彩色电脑屏幕 |
| all | 所有设备 |
| braille | 盲文 |
| embossed | 盲文打印 |
| handheld | 手持设备 |
| 文档打印或打印预览模式 | |
| projection | 项目演示，比如幻灯片 |
| speech | 演讲 |
| tty | 固定字母间距的网格的媒体，如电传打字机 |
| tv | 电视 |
逻辑关键字：
| 关键字 | 说明 |
| only | 限定某种设备类型 |
| and | 逻辑与，连接设备名和选择条件 |
| not | 排除某种设备 |
| , | 设备列表 |
可用设备名参数：
| 媒体特性 | 值 | 可用媒体类型 | 接受min／max | 简介 |
| width | <length> | 屏幕／触摸设备 | yes | 定义输出设备中的页面可见区域宽度（单位一般是px） |
| height | <length> | 屏幕／触摸设备 | yes | 定义输出设备中的页面可见区域高度（单位一般是px） |
| device-width | <length> | 屏幕／触摸设备 | yes | 定义输出设备的屏幕可见宽度（单位一般是px） |
| device-height | <length> | 屏幕／触摸设备 | yes | 定义输出设备的屏幕可见高度（单位一般是px） |
| orientation | portrait|landscape | 位图介质类型 | no | 定义'height'是否大于或等于'width'。值就为portrait，即横向。否则为landscape，为竖屏 |
| aspect-ratio | <ratio> | 位图介质类型 | yes | 定义浏览器的长宽比 |
| device-aspect-ratio | <ratio> | 位图介质类型 | yes | 定义设备屏幕长宽比，如常见的显示器比率：4/3，16/9，16/10 |
| color | <integer> | 视觉媒体 | yes | 定义每一组输出设备的彩色元件个数。如果不是彩色设备，则值等于0 |
| color-index | <integer> | 视觉媒体 | yes | 定义在输出设备的彩色查询表中的条目数，如果没有使用彩色查询表，则值等于0 |
| monochrome | <integer> | 视觉媒体 | yes | 定义在一个单色框架缓冲区中每像素包含的单色元件个数，如果不是单色设备，则值等于0 |
| resolution | <resolution> | 位图介质类型 | yes | 定义设备的分辨率。如：96dpi，300dpi，118dpcm |
| scan | progressive｜interlace | 电视类 | no | 定义电视类设备的扫描工序，progressive逐行扫描，interlace隔行扫描 |
| grid | <integer> | 栅格设备 | no |
Determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1. Otherwise it is zero. 用来查询输出设备是栅格设备还是位图设备， 如果是栅格设备为1，否则值为0。 |
测试工具：
一个在线工具－Responsivator，可以模拟iphone、ipad和少量android设备。
实现举例：
/*浏览器的可视区域小于980px*/
@media screen and (max-width: 980px) {
#wrap {width: 90%; margin: 0 auto;}
#content {width: 60%; padding: 5%;}
#sidebar {width: 30%;}
#footer {padding: 8% 5%; margin-botton: 10px;}
}
/*浏览器的可视区域小于650px*/
@media screen and (max-width:650px) {......}
格式化一些css属性的初始值：
/*禁止iphone中safari的字号自动调整*/
html {
-webkit-text-size-adjust: none;
}
/*设置html5元素为块*/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
diplay: block;
}
/*设置图片视频等自适应调整*/
img {
max-width: 100%;
height: auto;
width: auto\9; /*ie8*/
}
.video embed, .video object, .video iframe {
width: 100%;
height: auto;
}
对于ie浏览器不支持media query的情况，我们可以使用Media Query JavaScript来解决，只需要在页面头部引用css3-mediaqueries.js即可。
例如：
<!-- [if lt IE 9] >
<script src="http://css-mediaqueries-js.googlecode.com/svn/trunk/css-mediaqueries.js"></script><!-- (或放在自己的服务器里) -->
<! [endif] -->
