这篇翻译不完整。请帮忙从英语翻译这篇文章

媒体查询包含一个可选的媒体类型和零或多个表达式来限制使用媒体特性的样式表范围,例如width,height,color.CSS3中的Media queries让内容的呈现可以只针对特定范围的输出设备而不必去改变内容本身.

语法

媒体查询包含一个可选的媒体类型和零或多个满足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。

注意:如果每个颜色单元具有不同数量的比特值,则使用最小的。例如,如果显示器为蓝色和红色提供5比特,而为绿色提供6比特,则认为每个颜色单元有5比特如果设备使用索引颜色,则使用颜色表中颜色单元的最小比特数。

示例

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

@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) { ... }
注意:“em” 在网格设备中有不同的意义;一个“em”的实际宽度不得而知,假设1em相当于一个网格单元的宽高。

高度(height)

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

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

注意:用户调整窗口大小后,火狐浏览器会根据使用了widthheight属性的媒体查询来切换合适的样式表。

黑白(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)

值: progressiveinterlace
媒体:media/tv
是否接受 min/max 前缀:否

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

示例

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

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

宽度(width)

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

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

注意:用户调整窗口大小后,火狐浏览器会根据使用了widthheight属性的媒体查询来切换合适的样式表。

示例

如果你想向最小宽度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网页排版引擎专有的媒体属性。这些属性中有些可能会被提议成官方媒体属性。

-moz-images-in-menus

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

如果设备允许图片出现在菜单中,这个值是1,否则的话,这个值是0。 This corresponds to the :-moz-system-metric(images-in-menus) CSS pseudo-class.

-moz-mac-graphite-theme

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

值: <integer>
媒体:media/visual

是否接受 min/max 前缀:否

If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.

This corresponds to the :-moz-system-metric(mac-graphite-theme) CSS pseudo-class.

-moz-maemo-classic

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

This corresponds to the :-moz-system-metric(maemo-classic) CSS pseudo-class.

-moz-device-pixel-ratio

Requires Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

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

Gives the number of device pixels per CSS pixel.

不要使用这个属性。

使用分辨率特性与dppx单位。

-moz-device-pixel-ratio可以用于兼容年龄超过16的Firefox浏览器,-webkit-device-pixel-ratio基于webkit的浏览器不支持dppx。

例子:

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

请参阅本文CSSWG兼容性有关决议和dppx良好实践。

注意:这个媒体功能也由Webkit用 -webkit-device-pixel-ratio实现. 按照Gecko命名规则,min 和 max 前缀命名为 min--moz-device-pixel-ratio and max--moz-device-pixel-ratio;但是同样的前缀命名被 Webkit实现为-webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.

-moz-os-version

Requires Gecko 25.0(Firefox 25.0 / Thunderbird 25.0 / SeaMonkey 2.22)

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

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

-moz-scrollbar-end-backward

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

对应于 :-moz-system-metric(scrollbar-end-backward) CSS pseudo-class.

-moz-scrollbar-end-forward

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

对应于 :-moz-system-metric(scrollbar-end-forward) CSS pseudo-class.

-moz-scrollbar-start-backward

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

对应于 :-moz-system-metric(scrollbar-start-backward) CSS pseudo-class.

-moz-scrollbar-start-forward

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

对应于:-moz-system-metric(scrollbar-start-forward) CSS pseudo-class.

-moz-scrollbar-thumb-proportional

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

对应于 :-moz-system-metric(scrollbar-thumb-proportional) CSS pseudo-class.

-moz-touch-enabled

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

对应于 :-moz-system-metric(touch-enabled) CSS pseudo-class.

例子

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

-moz-windows-classic

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

This corresponds to the :-moz-system-metric(windows-classic) CSS pseudo-class.

-moz-windows-compositor

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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

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

对应于 :-moz-system-metric(windows-compositor) CSS pseudo-class.

-moz-windows-default-theme

Requires Gecko 1.9.2(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

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) CSS pseudo-class.

-moz-windows-theme

Requires Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

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

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

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 21 3.5 (1.9.1) 9.0 9 4
grid ? 未实现 (grid media type is not supported) ? ? ?
resolution ? 3.5 (1.9.1) supports <integer> values;
8.0 (8.0) supports <number> values, as per the spec.
? ? ?
scan ? 未实现 (tv media type is not supported) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) ? (Yes) (Yes)

其它

 
 
 
 
 
 
 
 
 

文档标签和贡献者

 最后编辑者: fidejade,