媒体查询支持浏览器：

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.可以通过标签的media属性来指定设备类型（如显示屏或打印机）。

具体实现，在标签中插入一个如下的link标签:


2.在css样式表中使用媒体查询

@media screen and (max-width: 768px){

h1{ color: #fff; }

}


3.使用CSS的@import指令在当前样式表中按条件引入其他样式表

@import url("phone.css") screen and (max-width:360px);

(切记使用这个方式会增加HTTP请求，影响加载速度，谨慎使用)


注意：


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元素覆盖默认的画布缩放设置。

只需要在标签中插入一个标签。

如：

content="initial-scale=1.0"的意思是将页面放大两倍（0.5缩小一般，3.0放大三倍，1.0实际大小）

user-scalable=no即是禁止缩放。