响应式设计：媒体查询
概述
CSS3引入的媒体查询，允许针对一个特定范围的输出设备定制内容的呈现，而不必改变内容本身。一个媒体查询由一个可选的媒体类型和零个或多个限制样式表应用范围的表达式组成。这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。当媒体查询为true时，其对应的样式表或样式规则就会遵循正常的级联规则进行应用。
使用方法
link元素中的CSS媒体查询
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
不论媒体查询的结果如何，<link>标签指向的样式表都会被下载，如果媒体查询返回false，样式表就不会被应用。
style元素中的CSS媒体查询
<style type="text/css" media="screen">
...
</style>
@media中的CSS媒体查询
@media (max-width: 600px) {
// styles
}
@import中的CSS媒体查询
@import url("css/all.css") screen;
@import url("css/print.css") print;
@import在页面完全载入以后加载，不推荐使用。
媒体类型
媒体类型是可选的，默认值是all。以下媒体类型是可用：
- all
匹配所有设备。 - print
匹配打印机，以及用于重现打印结果的设备，例如在“打印预览”中显示文档的web浏览器。 - screen
匹配所有非打印或非阅读的设备。 - speech
匹配屏幕阅读器和类似的阅读页面的设备。
以下媒体类型已被弃用，浏览器应该认为他们是合法的，但不应该匹配任何设备：
- tty
- tv
- projection
- handheld
- braille
- embossed
- aural
注意：恰当的媒体特性能够捕获媒体类型的重要差异，所以预计所有的媒体类型都将被弃用。
操作符
构建复杂的媒体查询通常需要使用not，and，only和逗号分隔等操作符。
and
and操作符用于将多个媒体属性或媒体属性与媒体类型合并为一个媒体查询。只有当类型和每个属性都为真时，媒体查询的结果才为真。
(min-width: 700px) and (orientation: landscape) { ... }
上面的媒体查询仅在宽度不小于700像素并在在横屏时有效。
逗号分隔
媒体查询中使用逗号分隔的效果等同于or逻辑操作符。如果任何一个媒体查询返回真，媒体查询的结果就为真。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号分隔的媒体查询列表能够作用于不同的媒体属性、类型和状态。
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
上面的媒体查询最小宽度为700像素或是横屏的手持设备上有效。
not
not操作符用来对媒体查询的结果进行取反，即如果媒体查询的结果为假就会应用指定的样式。
@media not all and (monochrome) { ... }
等价于：
@media not (all and (monochrome)) { ... }
not操作符仅能应用于整个查询，而不能单独应用于一个独立的媒体属性或媒体类型。
@media not (screen and min-width: 700px), print and (color)
等价于：
@media (not (screen and (min-width: 700px))), print and (color)
在逗号分隔的媒体查询列表中，not操作符仅会否定它应用到的媒体查询上而不影响其它的媒体查询。
only
only操作符用于对老旧的浏览器隐藏样式表。
媒体查询的概念源于HTML4 HTML401。该规范只定义了媒体类型，但提供了一种向前兼容的语法，可以兼容未来的概念，如媒体特性：它会获取媒体查询中直到第一个非字母或非数字字符的子串，并将其解释为媒体类型，然后忽略查询的其余部分。例如，媒体查询screen and (color)将被截断为screen。
不幸的是，这意味着使用这种错误处理行为的老旧浏览器将忽略媒体查询中的任何媒体特性，即使它们比查询中的媒体类型重要得多。这可能导致在不适当的情况下意外使用样式。
为了对老旧浏览器隐藏这些媒体查询，可以将only关键字作为媒体查询的前缀。对于支持媒体查询的浏览器，only关键字不会对媒体查询结果产生影响；但是对于老旧浏览器会被解析为未知的媒体类型“only”，从而忽略该查询。
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
only只能用作媒体类型的前缀。只含有媒体特性的查询，带有not操作符的查询都会被老旧浏览器解析为false。
媒体属性
- 大多数媒体属性可以带有“min-”或“max-”前缀，用于表达“最低…”或者“最高…”。
- 如果你未向媒体属性指定一个值，并且该特性的实际值不为零，则该表达式被解析为真。
- 如果浏览器运行的设备上没有该属性值，包含这个属性值的表达式一般返回假。例如，在语音合成器上查询屏幕长宽比总是返回假。
width
值： <length>
是否接受min/max前缀：是
width描述了输出设备渲染区域（如浏览器可视区域或打印机纸盒）的宽度。
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
上面的查询适用于宽度在500px和800px之间的屏幕。
height
值：<length>
是否接受min/max前缀：是
height描述了输出设备渲染区域（如浏览器可视区域或打印机纸盒）的高度。
device-height
值：<length>
是否接受min/max前缀：是
device-height描述了输出设备的高度，以CSS像素度量。
device-width
值：<length>
是否接受min/max前缀：是
device-width描述了输出设备的宽度，以CSS像素度量。
orientation
值：landscape | portrait
是否接受min/max前缀：否
orientation指定了设备处于横屏landscape（宽度大于高度）模式还是竖屏portrait（高度大于宽度）模式。
resolution
值： <resolution>
是否接受min/max前缀：是
resolution指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。
为每英寸至多300点的打印机应用样式：
@media print and (min-resolution: 300dpi) { ... }
替换老旧的 (min-device-pixel-ratio: 2) 语法：
@media screen and (min-resolution: 2dppx) { ... }
aspect-ratio
值：<ratio>
是否接受min/max前缀：是
aspect-ratio描述了输出设备目标显示区域的宽高比。该值代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例，包含两个以“/”分隔的正整数。
@media screen and (min-aspect-ratio: 1/1) { ... }
上面的查询指定了宽高比为1：1或者更大。换句话说，可视区域或者是正方形或者是宽屏。
device-aspect-ratio
值：<ratio>
是否接受min/max前缀：是
device-aspect-ratio描述了输出设备的宽高比。该值代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例，包含两个以“/”分隔的正整数。
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
上面的查询指定了宽高比为16：9或者16：10。
color
值： <color>
是否接受min/max前缀：是
color指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。
注意：如果每个颜色单元具有不同数量的比特值，则使用最小的。例如，如果显示器为蓝色和红色提供5比特，而为绿色提供6比特，则认为每个颜色单元有5比特。如果设备使用索引颜色，则使用颜色表中颜色单元的最小比特数。
向所有能显示颜色的设备应用样式表：
@media all and (color) { ... }
向每个颜色单元至少有4个比特的设备应用样式表：
@media all and (min-color: 4) { ... }
color-index
值：<integer>
是否接受min/max前缀：是
color-index指定了输出设备中颜色查询表中的条目数量。
向所有使用索引颜色的设备应用样式表：
@media all and (color-index) { ... }
向所有使用至少256个索引颜色的设备应用样式表：
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
monochrome
值：<integer>
是否接受min/max前缀：是
monochrome指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0。
向所有黑白设备应用样式表：
@media all and (monochrome) { ... }
向每个像素至少8比特的黑白设备应用样式表：
@media all and (min-monochrome: 8) { ... }
grid
值：<integer>
是否接受min/max前缀： 否
grid判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。
向一个15字符宽度或更窄的手持设备应用样式：
@media handheld and (grid) and (max-width: 15em) { ... }
注意：“em” 在网格设备中有不同的意义；一个“em”的实际宽度不得而知，假设1em相当于一个网格单元的宽高。
scan
值： progressive | interlace
是否接受min/max前缀：否
scan描述了电视输出设备的扫描过程。
向以顺序方式扫描的电视机上应用样式表：
@media tv and (scan: progressive) { ... }
媒体查询模板
application
对于大屏幕，使用固定布局，内容通常是多列；对于小屏幕，使用流体布局，内容通常是单列的。 大屏幕：980px 小屏幕：650px
定位修改为static
不同屏幕下是否浮动，宽度改变
响应式图片
.img-responsive { max-width: 100%; height: auto; }
兼容IE .img-responsive { max-width: 100%; width: 100%; height: auto; }
.video embed, .video object, .video iframe { width: 100%; height: auto; }
让iphone不具有缩放文字大小的功能：
|
|
http://www.w3cplus.com/css3/responsive-design-with-css3-media-queries
参考文章