一、为什么需要媒体查询
CSS3的媒体查询模块就是为了针对设备特性（width、height等）设置特定的css样式，可以在不改变当前页面内容的情况下，为特定的一些设备定制显示效果。
二、媒体查询语法
1.媒体查询在一段CSS后引入特定样式
@media screen and (max-width:960px){
...
}
2.使用 CSS 的@import 指令在当前样式表中按条件引入其他样式表
@import url("phone.css") screen and (max-width:360px);
3.利用媒体查询引入特定的样式文件
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />
三、媒体查询可检测的特性
- width：视口宽度
- height：视口高度
- device-width：渲染表面的宽度(对我们来说,就是设备屏幕的宽度)
- device-height：渲染表面的高度(对我们来说,就是设备屏幕的高度)
- orientation：检查设备处于横向还是纵向
- aspect-ratio：基于视口宽度和高度的宽高比。一个 16∶9 比例的显示屏可以这样定义 aspect-ratio: 16/9
- device-aspect-ratio：和 aspect-ratio 类似,基于设备渲染平面宽度和高度的宽高比
- color:每种颜色的位数。例如 min-color: 16 会检测设备是否拥有 16 位颜色。
- color-index:设备的颜色索引表中的颜色数。值必须是非负整数。
- monochrome:检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数,如
monochrome: 2 - resolution:用来检测屏幕或打印机的分辨率,如 min-resolution: 300dpi。还可以接受每厘米像素点数的度量值,如 min-resolution: 118dpcm。
- scan:电视机的扫描方式,值可设为 progressive(逐行扫描)或 interlace(隔行扫描)。如 720p HD 电视(720p 的 p 即表明是逐行扫描)匹配 scan: progressive,而 1080i HD 电视(1080i 中的 i 表明是隔行扫描)匹配 scan: interlace。
- grid:用来检测输出设备是网格设备还是位图设备。
除 scan 和 grid 之外,都可使用 min 和 max 前缀来创建一个查询范围，如min-width:200px、max-width:360px。
四、利用viewport禁止用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； 尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。
width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。
注意：关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的“隐藏滚动条”， 是根本没有这个功能。iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。 当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
- 第一个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
- 第二个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
- 第三个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码
