CSS媒体查询

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。

语法

媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

当媒体查询为true时，其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false，<link> 标签指向的样式表也将会被下载(但是它们不会被应用)

除非使用not或only操作符，否则媒体类型是可选的，默认值是all(全部).

逻辑操作符

你可以使用逻辑操作符，包括not、and和only等，构建复杂的媒体查询。and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。not操作符用来对一条媒体查询的结果进行取反。only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符，必须明确指定一个媒体类型。

你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于or操作符。

and

and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询，即一个媒体属性与默认指定的all媒体类型，可能像这样子：

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

如果你只想在横屏时应用这个，你可以使用 and 操作符合并媒体属性：

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

现在上面的媒体查询仅在可视区域宽度不小于700像素并在在横屏时有效。如果，你仅想再电视媒体上应用，你可以使用 and 操作符合并媒体属性：

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

现在，上面媒体查询仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。

逗号分隔列表

媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

例如，如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：

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

如上文，如果是一个800像素宽的屏幕设备，媒体语句将会返回真，因为第一部分相当于 @media all and (min-width: 700px) 将会应用于该设备并且返回真，尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地，如果我是一个500像素宽的横屏手持设备，尽管第一部分因为宽度问题而不匹配，第二部分仍会成功，因此整个媒体查询返回真。

not

not 关键字应用于整个媒体查询，在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上 )。在逗号媒体查询列表中not仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。例如，not在下面的查询中最后被计算：

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

等价于：

@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" />

伪范式

media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
  | <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
  projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
  | height | min-height | max-height
  | device-width | min-device-width | max-device-width
  | device-height | min-device-height | max-device-height
  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
  | color | min-color | max-color
  | color-index | min-color-index | max-color-index
  | monochrome | min-monochrome | max-monochrome
  | resolution | min-resolution | max-resolution
  | scan | grid

媒体查询是大小写不敏感的，包含未知媒体类型的查询通常返回假。

媒体特征

大多数媒体属性可以带有“min-”或“max-”前缀，用于表达“最低...”或者“最高...”。例如，max-width:12450px表示应用其所包含样式的条件最高是宽度为12450px，大于12450px则不满足条件，不会应用此样式。这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值，并且该特性的实际值不为零，则该表达式被解析为真。

颜色（color）

值： <color>
媒体： media/visual
是否接受 min/max 前缀：是

指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。

示例

向所有能显示颜色的设备应用样式表：

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

向每个颜色单元至少有4个比特的设备应用样式表：

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

颜色索引（color-index）

值：<integer>
媒体： media/visual
是否接受 min/max 前缀：是

指定了输出设备中颜色查询表中的条目数量。

示例

向所有使用索引颜色的设备应用样式表，你可以这么做：

@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>
媒体： media/visual, media/tactile
是否接受 min/max 前缀：是

描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。

示例

下面为显示区域宽高至少为一比一的设备选择了一个特殊的样式表。

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

这指定了宽高比或者1：1或者更大。换句话说，可视区域或者是正方形或者是宽屏。

设备宽高比（device-aspect-ratio）

值：<ratio>
媒体：media/visual, media/tactile
是否接受 min/max 前缀：是

描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。

示例

下面为宽屏设备选择了一个特殊的样式表。

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

宽高比或者16：9或者16：10。

设备高度（device-height）

值：<length>
媒体：media/visual, media/tactile
是否接受 min/max 前缀：是

描述了输出设备的高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。

示例

向显示在最大宽度800px的屏幕上的文档应用样式表，你可以这样做：

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

设备宽度（device-width）

值：<length>
媒体： media/visual, media/tactile
是否接受 min/max 前缀：是

描述了输出设备的宽度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。

网格（grid）

值：<integer>
媒体：all
是否接受 min/max 前缀： 否

判断输出设备是网格设备还是位图设备。如果设备是基于网格的（例如电传打字机终端或只能显示一种字形的电话），该值为1，否则为0。

示例

向一个15字符宽度或更窄的手持设备应用样式：

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

高度（height）

值：<length>
媒体：media/visual, media/tactile
是否接受 min/max 前缀：是

height 媒体属性描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度。

黑白（monochrome）

值：<integer>
媒体： media/visual
是否接受 min/max 前缀：是

指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0。

示例

向所有黑白设备应用样式表：

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

向每个像素至少8比特的黑白设备应用样式表：

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

方向（orientation）

值：landscape | portrait
媒体：media/visual
是否接受 min/max 前缀：否

指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式。

示例

向竖屏设备应用样式表：

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

分辨率（resolution）

值： <resolution>
媒体： bitmap
是否接受 min/max 前缀：是

指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。

示例

为每英寸至多300点的打印机应用样式：

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

替换老旧的 (min-device-pixel-ratio: 2) 语法：

@media screen and (min-resolution: 2dppx) { ... }

扫描（scan）

值： progressive | interlace
媒体：media/tv
是否接受 min/max 前缀：否

描述了电视输出设备的扫描过程。

示例

向以顺序方式扫描的电视机上应用样式表：

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

宽度（width）

值： <length>
媒体： media/visual, media/tactile
是否接受 min/max 前缀：是

width 媒体属性描述了输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度。

示例

如果你想向最小宽度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) { ... }

Mozilla专有的媒体属性

Mozilla 提供了几个Gecko网页排版引擎专有的媒体属性。这些属性中有些可能会被提议成官方媒体属性。

值: <integer>
媒体: media/visual
是否接受 min/max 前缀：否

如果设备允许图片出现在菜单中，这个值是1，否则的话，这个值是0。 

值： <integer>
媒体：media/visual

是否接受 min/max 前缀：否

如果用户将Mac OS X系统的主题设置为“Graphite”, 这个值为1. 如果使用标准主题或者不是使用Mac OS X，则为0.

对应 :-moz-system-metric(mac-graphite-theme) 伪类.

值： <integer>
媒体： media/visual
是否接受 min/max 前缀：否

如果使用经典的Maemo主题, 值为 1; 如果使用更新的Fremantle主题, 值为 0.

对应 :-moz-system-metric(maemo-classic) 伪类.

值：<number>
媒体： media/visual
是否接受 min/max 前缀：是

获取CSS与设备的像素个数比.

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */ 

Value: windows-xp | windows-vista | windows-win7 | windows-win8
Media: media/visual
Accepts min/max prefixes: no

指出目前使用哪些操作系统版本。目前只在Windows上实现。可能的值是:

• windows-xp
• windows-vista
• windows-win7
• windows-win8

这是为应用程序提供皮肤，提供其他浏览器代码，使得其能够适应工作与当前操作系统版本的代码。

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

如果设备的用户界面在滚动条的末尾·显示一个向后的箭头按钮,这是1，否则它是0。

对应于 :-moz-system-metric(scrollbar-end-backward) 伪类.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

如果设备的用户界面在滚动条的末尾显示一个箭头按钮,这是1，否则它是0。

对应于 :-moz-system-metric(scrollbar-end-forward) 伪类.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

如果设备的用户界面在滚动条的开始显示一个向后的箭头按钮,这是1，否则它是0。

对应于 :-moz-system-metric(scrollbar-start-backward) 伪类.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

如果设备的用户界面在滚动条的开始显示一个箭头按钮,这是1，否则它是0。

对应于:-moz-system-metric(scrollbar-start-forward) 伪类.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

如果设备的用户界面成比例显示滚动条的thumb(即大小基于可视document的百分比),这是1。否则它是0。

对应于 :-moz-system-metric(scrollbar-thumb-proportional) 伪类.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

如果设备支持触摸事件(触屏设备), 这是1，否则它是0。

对应于 :-moz-system-metric(touch-enabled) 伪类.

例子

你可以使用这来渲染按钮变得略大，例如，如果用户使用的是触屏设备，通过这个可以让按钮拥有很多效果，变得更友好。

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

如果用户使用的是没有主题的Windows (在经典模式下而不是使用uxtheme),这是1，否则它是0。

对应 :-moz-system-metric(windows-classic) 伪类.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

如果用户用DWM排字工人使用Windows，这是1，其他为0。

对应于 :-moz-system-metric(windows-compositor) 伪类.

Value: <integer>
Media: media/visual
Accepts min/max prefixes: no

如果用户正在使用默认的Windows主题之一 (Luna, Royale, Zune, or Aero (包括 Vista Basic, Vista Advanced, and Aero Glass),这是1，否则它是0。

对应于 :-moz-system-metric(windows-default-theme) 伪类.

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
Media: media/visual
Accepts min/max prefixes: no

表明目前使用的是Windows的主题，仅在Windows上可用，可能的值有:

• aero
• luna-blue
• luna-olive
• luna-silver
• royale
• generic
• zune

这是为应用程序提供的皮肤，其他浏览器代码能够适应当前窗口的工作主题。

浏览器兼容性

其它

• CSS 3 媒体查询规范
• 媒体类型
• 用代码实现媒体查询\

• CSS 3 media query specification
• Media types
• Using media queries from code
• List of mobile and tablet viewport sizes with pixel ratios
• CSS Animations Between Media Queries by David Walsh
• @media (-webkit-transform-3d)