媒体查询
媒体查询支持浏览器：
Firefox 3.6+，Safari 4+，Chrome 4+，Opera 9.5+，iOS Safari 3.2+，Opera Mobile 10+，Android 2.1+，Internet Explorer 9+
IE6，7，8可以通过实现兼容修复
Respond.js(http://github.com/scottjehl/Respond）。
增加媒体查询最快的Javascript工具。但它目前无法解析CSS的@import命令。
媒体查询语法：
1.可以通过<link>标签的media属性来指定设备类型（如显示屏或打印机）。
具体实现，在<head>标签中插入一个如下的link标签:
<link rel="stylesheet" media="screen" href="screen-styles.css">
2.在css样式表中使用媒体查询
@media screen and (max-width: 768px){
h1{ color: #fff; }
}
3.使用CSS的@import指令在当前样式表中按条件引入其他样式表
@import url("phone.css") screen and (max-width:360px);
(切记使用这个方式会增加HTTP请求，影响加载速度，谨慎使用)
注意：
<link rel="stylesheet" media="screen and (orientation:portrait) and (max-width: 800px),projection" href="800wide-portrait-screen.css">
1.媒体查询直接使用逗号分隔
2.没有后续表达式，意味着只要是projection就满足条件
媒体查询能检测特性
1.width:视口宽度
2.height:视口高度
3.device-width:渲染表面的宽度（即设备屏幕的宽度）
4.device-height:渲染表面的高度（即设备屏幕的高度）
5.orientation:检查设备处于横向还是纵向
6.aspect-ratio:基于视口宽度和高度的宽高比。16:9比例的显示屏定义：aspect-ratio:16/9
7.device-aspect-ratio:基于渲染表面宽度和高度的宽高比
8.color:每种颜色的位数。如min-color:16;会检测设备是否拥有16为颜色
9:color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
10.monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如: monochrome:2。
11.resolution:用来检测屏幕或打印机的分辨率。如min-resolution:300dpi。hai可以接受每厘米像素点数的度量值，如 min-resolution:118dpcm。
12.scan:电视机的扫描方式，值可设为progressive(逐行扫描)或interlace(隔行扫描)，如720pHD电视（720p既表明是逐行扫描）匹配scan:progressive，而1080iHD电视（1080iHD既表明是隔行扫描）匹配scan:interlace
13:grid:用来检测输出设备是网格设备还是位图设备。
如何阻止移动浏览器自动调整页面大小：
iOS和Android浏览器都是基于webkit核心。都支持viewport meta元素覆盖默认的画布缩放设置。
只需要在<head>标签中插入一个<meta>标签。
如：
<meta name="viewport" content="initial-scale=2.0,width=device-width,user-scalable=no" />
content="initial-scale=1.0"的意思是将页面放大两倍（0.5缩小一般，3.0放大三倍，1.0实际大小）
user-scalable=no即是禁止缩放。