CSS3：媒体查询

媒体查询增强了媒体类型方法，允许根据特定的设备特性应用样式，可以使网站呈现的样式适应不同的屏幕尺寸等。媒体查询包含一个媒体类型和0个或多个表述媒体特征的表达式。媒体查询可以用在style中或者样式表中，用在style中的语法如下：

<style>
	@media logic type and (feature: value) {
	  /* 目标CSS样式规则写在这里 */
	}
</style>

例如：

<style>
	@media screen and (max-width: 600px) {
	  .facet_sidebar {
		display: none;
	  }
	}
</style>

也可以用在指向外部样式表的链接：

<link rel="stylesheet" media="logic type and (feature: value)" href="your-stylesheet.css" />

例如：

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

当一个媒体查询为true，对应的样式表或样式规则将被应用。
注意：使用了媒体查询的link标签对应的样式表，即使媒体查询返回false，任然会被下载，只是不会被应用。

逻辑操作（logic）

逻辑操作包括not、and和only，and操作符被用于融合多个媒体特征到一个媒体查询，not操作符用于否定整个媒体查询，only操作符用于确保旧的浏览器不读取余下的媒体查询。
如果你使用了not或者only操作符，你必须指定一个特定的媒体类型。

and

and用于融合多个媒体特征，也可用于融合带有媒体类型的媒体特征。下面是一个使用了all媒体类型的媒体特征（all可以省略）：

@media (min-width: 700px) { ... }

如果你仅希望应用这个样式到横向模式，你能用这样做：

@media (min-width: 700px) and (orientation: landscape) { ... }

现在上面的媒体查询将仅在宽度大于等于700px，且处理横向模式时才返回true。如果你希望这个样式仅应用到媒体类型screen，你能再添加一个and操作：

@media screen and (min-width: 700px) and (orientation: landscape) { ...  }

现在，上面的媒体查询仅应用到媒体类型为screen，宽度大于等于700px，且显示在横向模式上。

逗号分隔列表

当使用媒体查询的逗号分隔列表时，如果列表中的任何媒体查询为true，样式表都会被运用。在逗号分隔列表中的每个媒体查询都被作为独立查询对待，运用到一个媒体查询上的任何操作符都不影响其它的。
例如，如果你想应用一套样式在宽度大于等于700px的设备上，或者采用横向模式的便捷式设备上，你可以这样：

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

如果我使用的设备的屏幕宽度大于700px，媒体查询将返回true，样式将被运用。如果我使用的是横向的便捷式设备，第一个媒体查询返回false，但第二个媒体查询将返回true，样式任将被使用。

not

not操作符将媒体查询的结果取反，使用not操作符必须指定设备类型，并且not操作符仅能用于一个完整的媒体查询，例如：

@media not all and (monochrome) { ... }

这个媒体查询将被理解为：

@media not (all and (monochrome)) { ... }

而当使用逗号分隔列表时：

@media not screen and (color), print and (color) { ... }

将被理解为：

@media (not (screen and (color))), print and (color) { ... }

only

only操作符用于防止老的不支持媒体查询的浏览器不读取余下的媒体查询，同时一并忽略链接的样式表：

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

媒体类型（type）

媒体类型指定媒体查询适用的设备。

all

所有设备适用。除非你用了not或者only操作，媒体类型默认为all。

print

适用于分页媒体（包括打印设备和其它将内容分离到多页的设备）和以打印预览模式在屏幕上查看的文档。

screen

主要指计算机屏幕。

speech

适用于语音同步器。

注意：Firefox当前仅实现了print和screen媒体类型。

媒体特征（feature）

大部分的媒体特征都能添加"min-"和"max-"前缀，用于表示最小和最大。如果你使用一个媒体特征没有指定值，那么如果特征值为非0，表达式将返回true。

color

值：<color>
媒体: visual
接受min/max前缀: yes
含义：表示输出设备每个颜色组件的比特数。如果设置不是一个彩色设备，值为0。
例如：
应用样式到所有彩色设备

@media all and (color) { ... }

应用样式到每个颜色组件至少4比特的设备

@media all and (min-color: 4) { ... }

color-index

值：<integer>
媒体: visual
接受min/max前缀: yes
含义：表示输出设备在颜色查找表中的条目数量。
例如：

应用样式到所有使用索引化颜色的设备

@media all and (color-index) { ... }

应用样式表到索引化颜色的设备，且至少256种颜色

<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />

aspect-ratio

值：<ratio>
媒体: visual，tactile
接受min/max前缀: yes
含义：形容输出设备的显示区域的长宽比。值由两个整数组成，使用"/"分隔，第一个值表示横向，第二个为纵向。
例如：

应用样式到长宽比至少为1的设备

@media screen and (min-aspect-ratio: 1/1) { ... }

device-aspect-ratio

值：<ratio>
媒体: visual，tactile
接受min/max前缀: yes
含义：形容输出设备的长宽比。值由两个整数组成，使用"/"分隔，第一个值表示横向，第二个为纵向。
例如：

应用样式到宽屏设备

@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

当设备长宽比为16:9或者16:10时应用该样式

device-height

值：<length>
媒体: visual，tactile
接受min/max前缀: yes
含义：形容输出设备的高度（为整个屏幕或页的高度，而不仅仅是渲染区域）。
例如：

应用样式到设备高度小于800px的设备

<link rel="stylesheet" media="screen and (max-device-height: 799px)" />

device-width

值：<length>
媒体: visual，tactile
接受min/max前缀: yes
含义：形容输出设备的宽度（为整个屏幕或页的宽度，而不仅仅是渲染区域）。
例如：

应用样式到设备宽度小于800px的设备

<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

display-mode

值：显示模式，可选值为fullscreen、standalone、minimal-ui和browser
媒体: visual，tactile
接受min/max前缀: yes
含义：基于现实模式的类型应用样式。
例如：

	@media all and (display-mode: fullscreen) {
	  body {
		margin: 0;
		border: 5px solid black;
	  }
	}

grid

值：布尔类型
媒体: visual，tactile
接受min/max前缀: no
含义：由输出设备为网格（grid）设备或者位图（bitmap）设备确定。如果设备为基于网格的设备，值为1，否则值为0。
例如：

@media handheld and (grid) and (max-width: 15em) { ... }

height

值：<length>
媒体: visual，tactile
接受min/max前缀: yes
含义：描述输出设备渲染区域的高度。

monochrome

值：<integer>
媒体: visual
接受min/max前缀: yes
含义：表示单色设备每像素的比特数。如果设备不是单色设备，值为0。
例如：

应用样式到所有单色设备：

@media all and (monochrome) { ... }

应用样式到每像素至少8比特的单色设备：

@media all and (min-monochrome: 8) { ... }

orientation

值：landscape | portrait
媒体: visual
接受min/max前缀: no
含义：表示视图是在landscape（宽大于高）或者portrait（高大于宽）模式。
例如：

应用样式到portrait模式：

@media all and (orientation: portrait) { ... }

resolution

值：<resolution>
媒体: bitmap
接受min/max前缀: yes
含义：表示输出设备的分辨率。分辨率可以表示为dpi（每英寸点数）或dpcm（每厘米点数）。
例如：

应用样式到至少300点每英寸像素的设备：

@media print and (min-resolution: 300dpi) { ... }

scan

值：progressive | interlace
媒体: tv
接受min/max前缀: no
含义：描述电视输出设备的扫描过程。
例如：

仅应用样式到渐进式扫描电视：

@media tv and (scan: progressive) { ... }

width

值：<length>
媒体: visual，tactile
接受min/max前缀: yes
含义：表示输出设备渲染区域的宽度。
例如：

如果你想应用样式到宽度大于20em的手持设备或者屏幕设备，你可以使用：

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

下面是使用样式到宽度大于8.5英寸的打印设备：

<link rel="stylesheet" media="print and (min-width: 8.5in)"
    href="http://foo.com/mystyle.css" />

下面是指定样式到屏幕宽度位于500px到800px之间的设备：

@media screen and (min-width: 500px) and (max-width: 800px) { ... }