MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 441635 of CSS媒体查询

  • Revision slug: Web/Guide/CSS/媒体查询
  • Revision title: CSS媒体查询
  • Revision id: 441635
  • Created:
  • Creator: Nightingale
  • Is current revision? No
  • Comment

Revision Content

媒体查询 包含了一个媒体类型和至少一个使用诸如宽度、高度和颜色等媒体特性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。

语法

媒体查询包含了一个媒体类型 和如CSS3规范中描述的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或否=假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假, <link> 标签上带有媒体查询的样式表 仍将被下载 (只不过不会被应用)。

除非你使用 not 或者 only 操作符,否则媒体类型是可选的,否则为 all

逻辑操作符

你可以使用逻辑操作符构建复杂的媒体查询包括 not,andonlyand 操作符组合多个 媒体属性 成一个单独的媒体查询,需要每个查询依次为真才返回真。not 操作符用于否定一个整体媒体查询。only 操作符用于仅在整体查询匹配时应用一个样式,在防止老旧浏览器应用选择的样式时有用。如果你使用 notonly 操作符时,你必须明确指定一个媒体类型。

你也可以将多个媒体查询以逗号分隔合并;如果任何一个为真,整个媒体语句返回真。相当于 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-”前缀,用于表达“大于等于”和“小于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。

注意:如果浏览器运行的设备上没有该属性值,包含这个属性值的表达式一般返回假。例如,在语音合成器上查询屏幕长宽比总是返回假。

颜色(color)

值: {{ Xref_csscolorvalue() }}
媒体: {{ Xref_cssvisual() }}
是否接受 min/max 前缀:是

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

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

示例

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

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

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

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

颜色索引(color-index)

值::{{ xref_cssinteger() }}
媒体: {{ Xref_cssvisual() }}
是否接受 min/max 前缀:

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

示例

向所有使用索引颜色的To indicate that a style sheet should apply to all devices using indexed color, you can do:

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

To apply a style sheet to indexed color devices with at least 256 colors:

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

aspect-ratio

Value: {{ xref_cssratio() }}
Media: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepts min/max prefixes: yes

Describes the aspect ratio of the targeted display area of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

Example

The following selects a special style sheet to use for when the display area is at least as wide as it is high.

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

This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.

device-aspect-ratio

Value: {{ xref_cssratio() }}
Media: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepts min/max prefixes: yes

Describes the aspect ratio of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

Example

The following selects a special style sheet to use for widescreen displays.

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

This selects the style when the aspect ratio is either 16:9 or 16:10.

device-height

Value: {{ Xref_csslength() }}
Media: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepts min/max prefixes: yes

Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

Example

To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:

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

device-width

Value: {{ Xref_csslength() }}
Media: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepts min/max prefixes: yes

Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

grid

Value: {{ xref_cssinteger() }}
Media: all
Accepts min/max prefixes: no

Determines whether the output device is a grid device or a bitmap device.  If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1.  Otherwise it is zero.

Example

To apply a style to handheld devices with a 15-character or narrower display:

@media handheld and (grid) and (max-width: 15em) { ... }
Note: The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.

height

Value: {{ Xref_csslength() }}
Media: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepts min/max prefixes: yes

The height media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).

Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.

monochrome

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: yes

Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.

Examples

To apply a style sheet to all monochrome devices:

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

To apply a style sheet to monochrome devices with at least 8 bits per pixel:

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

orientation

Value: landscape | portrait
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

Indicates whether the device is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

Example

To apply a style sheet only in portrait orientation:

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

resolution

Value: {{ Xref_cssresolution() }}
Media: {{ Xref_cssbitmap() }}
Accepts min/max prefixes: yes

Indicates the resolution (pixel density) of the output device.  The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).

Example

To apply a style sheet to devices with at least 300 dots per inch of resolution:

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

To replace the old (min-device-pixel-ratio: 2) syntax:

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

scan

Value: progressiveinterlace
Media: {{ Xref_csstv() }}
Accepts min/max prefixes: no

Describes the scanning process of television output devices.

Example

To apply a style sheet only to progressive scanning televisions:

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

width

Value: {{ Xref_csslength() }}
Media: {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}
Accepts min/max prefixes: yes

The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.

Examples

If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:

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

This media query specifies a style sheet that applies to printed media wider than 8.5 inches:

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

This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:

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

Mozilla-specific media features

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

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 {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

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 {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}

Value: {{ xref_cssnumber() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: yes

Gives the number of device pixels per CSS pixel.

Do not use this feature.

Use the resolution feature with the dppx unit instead.

-moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

Example:

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

See this CSSWG article for compatibility good practices regarding resolution and dppx.

Note: This media feature is also implemented by Webkit as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

Value: windows-xp | windows-vista | windows-win7 | windows-win8
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:

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

This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

Example

You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

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

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

Value: {{ xref_cssinteger() }}
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
Media: {{ Xref_cssvisual() }}
Accepts min/max prefixes: no

Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

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

This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatChrome("21") }} {{ CompatGeckoDesktop("1.9.1") }} {{ CompatIE("9.0") }} {{ CompatOpera("9") }} {{ CompatSafari("4") }}
grid {{ CompatUnknown() }} {{ CompatNo() }} (grid media type is not supported) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
resolution {{ CompatUnknown() }} {{ CompatGeckoDesktop("1.9.1") }} supports {{ xref_cssinteger() }} values;
{{ CompatGeckoDesktop("8.0") }} supports {{ xref_cssnumber() }} values, as per the spec.
{{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
scan {{ CompatUnknown() }} {{ CompatNo() }} (tv media type is not supported) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

See also

 
 
 
 
 

Revision Source

<p><span class="seoSummary">媒体查询 包含了一个媒体类型和至少一个使用诸如宽度、高度和颜色等媒体特性来限制样式表范围的表达式。</span><a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。</p>
<h2 id=".E8.AF.AD.E6.B3.95">语法</h2>
<p><strong>媒体查询</strong>包含了一个<a class="internal" href="/en-US/docs/CSS/@media" title="/en-US/docs/CSS/@media">媒体类型</a> 和如CSS3规范中描述的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或否=假。如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,<strong>并且</strong>媒体查询中的所有表达式为真。</p>
<pre class="brush: html">
<code class="brush: html">&lt;!-- link元素中的CSS媒体查询 --&gt;
</code>&lt;link rel="stylesheet"&nbsp;media="(max-width: 800px)" href="example.css" /&gt;

<code class="brush: html">&lt;!-- 样式表中的CSS媒体查询 --&gt;
&lt;style&gt;
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
&lt;/style&gt;</code></pre>
<p>当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假, <code>&lt;link&gt;</code> 标签上带有媒体查询的样式表 <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">仍将被下载</a> (只不过不会被应用)。</p>
<p>除非你使用 <code>not</code> 或者 <code>only</code> 操作符,否则媒体类型是可选的,否则为 <code>all</code><span style="line-height: 1.572;"> 。</span></p>
<h3 id=".E9.80.BB.E8.BE.91.E6.93.8D.E4.BD.9C.E7.AC.A6">逻辑操作符</h3>
<p>你可以使用逻辑操作符构建复杂的媒体查询包括 <code>not</code><code>,and</code> 和 <code>only</code>。<code>and</code> 操作符组合多个 <a href="#Media_features" title="#Media_features">媒体属性</a> 成一个单独的媒体查询,需要每个查询依次为真才返回真。<code>not</code> 操作符用于否定一个整体媒体查询。<code>only</code> 操作符用于仅在整体查询匹配时应用一个样式,在防止老旧浏览器应用选择的样式时有用。如果你使用 <code>not</code>或 <code>only</code> 操作符时,你必须明确指定一个媒体类型。</p>
<p>你也可以将多个媒体查询以逗号分隔合并;如果任何一个为真,整个媒体语句返回真。相当于 <code>or</code> 操作符。</p>
<h4 id="and">and</h4>
<p><code>and</code> 关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询,一个媒体属性与默认指定的 <code>all</code>媒体类型可能想这样子:</p>
<pre class="brush: css">
@media (min-width: 700px) {&nbsp;... }</pre>
<p>如果你只想在横屏时应用这个,你可以使用 <code>and</code> 操作符合并媒体属性:</p>
<pre class="brush: css">
 (min-width: 700px) and (orientation: landscape) {&nbsp;... }</pre>
<p>现在上面的媒体查询仅在可视区域宽度不小于700像素并在在横屏时有效。如果,你仅想再电视媒体上应用,你可以使用 <code>and</code> 操作符合并媒体属性:</p>
<pre class="brush: css">
@media tv and (min-width: 700px) and (orientation: landscape) {&nbsp;... }</pre>
<p>现在,上面媒体查询仅在电视媒体上,可视区域不小于700像素宽度并且是横屏时有效。</p>
<h4 id=".E5.88.86.E9.9A.94.E5.88.97.E8.A1.A8">分隔列表</h4>
<p>媒体查询中使用逗号分隔效果等同于 <code>or </code>逻辑操作符。当使用逗号分隔的媒体查询时,如果任何一个媒体查询返回真,样式就是有效的。逗号分隔的列表中每个查询都是独立的,一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。</p>
<p>例如,如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式,你可以这样写:</p>
<pre class="brush: css">
@media (min-width: 700px), handheld and (orientation: landscape) {&nbsp;... }</pre>
<p>如上文,如果一个800像素宽的屏幕设备,媒体语句将会返回真,因为第一部分相当于 <code>@media all and (min-width: 700px)</code> 将会应用于我的设备并且返回真,尽管我的屏幕媒体类型并不与第二部分的手持媒体类型相符。同样地,如果我是一个500像素宽的横屏手持设备,尽管第一部分因为宽度问题而不匹配,第二部分仍会成功,因此整个媒体查询返回真。</p>
<h4 id="not">not</h4>
<p><code>not</code> 关键字应用于整个媒体查询,在媒体查询为假时返回真 (比如 <code>monochrome</code> 应用于彩色显示设备上或 一个600像素的屏幕应用于 <code>min-width: 700px</code> 属性查询上 )。在逗号媒体查询列表中 <code>not</code> 仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 <code>not</code> 关键字仅能应用于整个查询,而不能单独应用于一个独立的查询。例如,<code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> 在下面的查询中最后被计算:</span></p>
<pre class="brush: css" style="font-size: 14px;">
@media not all and (monochrome) {&nbsp;... }
</pre>
<p>等价于:</p>
<pre class="brush: css" style="font-size: 14px;">
@media not (all and (monochrome)) { ... }
</pre>
<p>而不是:</p>
<pre class="brush: css" style="font-size: 14px;">
@media (not all) and (monochrome) { ... }</pre>
<p>另一个例子,看下面的媒体查询:</p>
<pre class="brush: css" style="font-size: 14px;">
@media not screen and (color), print and (color)
</pre>
<p>等价于:</p>
<pre class="brush: css" style="font-size: 14px;">
@media (not (screen and (color))), print and (color)</pre>
<h4 id="only">only</h4>
<p><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> 关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式:</span></p>
<pre class="brush: html">
&lt;link rel="stylesheet"&nbsp;media="only screen and (color)" href="example.css" /&gt;
</pre>
<h3 id=".E4.BC.AA.E8.8C.83.E5.BC.8F">伪范式</h3>
<pre>
media_query_list: &lt;media_query&gt; [, &lt;media_query&gt; ]*
media_query: [[only | not]? &lt;media_type&gt; [ and &lt;expression&gt; ]*]
  | &lt;expression&gt; [ and &lt;expression&gt; ]*
expression: ( &lt;media_feature&gt; [: &lt;value&gt;]? )
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</pre>
<p>媒体查询是大小写敏感的。包含未知媒体类型的查询通常返回假。</p>
<div class="note">
  <strong>注意:</strong> 表达式需要用圆括号。没有使用的会引起错误。</div>
<h2 id=".E5.AA.92.E4.BD.93.E5.B1.9E.E6.80.A7">媒体属性</h2>
<p>大多数媒体属性带有“min-”和“max-”前缀,用于表达“大于等于”和“小于等于”。这避免了使用与HTML和XML冲突的“&lt;”和“&gt;”字符。如果你未向媒体属性指定一个值,并且该特性的实际值不为零,则该表达式被解析为真。</p>
<div class="note">
  <strong>注意:如果浏览器运行的设备上没有该属性值,包含这个属性值的表达式一般返回假。例如,在语音合成器上查询屏幕长宽比总是返回假。</strong></div>
<h3 id=".E9.A2.9C.E8.89.B2.EF.BC.88color.EF.BC.89">颜色(color)</h3>
<p><strong>值:</strong> {{ Xref_csscolorvalue() }}<br />
  <span style="font-weight: bold;"><strong>媒体:</strong></span> {{ Xref_cssvisual() }}<br />
  <strong>是否接受 min/max 前缀:是</strong></p>
<p>指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为0。</p>
<div class="note">
  <strong>注意:</strong>如果每个颜色单元具有不同数量的比特值,则使用最小的。例如,如果显示器为蓝色和红色提供5比特,而为绿色提供6比特,则认为每个颜色单元有5比特<strong>。</strong>如果设备使用索引颜色,则使用颜色表中颜色单元的最小比特数。</div>
<h4 id="Examples">示例</h4>
<p>向所有能显示颜色的设备应用样式表:</p>
<pre class="brush: css">
@media all and (color) { ... }
</pre>
<p>向每个颜色单元至少有4个比特的设备应用样式表:</p>
<pre class="brush: css">
@media all and (min-color: 4) { ... }
</pre>
<h3 id="color-index">颜色索引(color-index)</h3>
<p><strong>值:</strong>:{{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;"><strong>媒体:</strong></span> {{ Xref_cssvisual() }}<br />
  <strong>是否接受 min/max 前缀:</strong> 是</p>
<p>指定了输出设备中颜色查询表中的条目数量。</p>
<h4 id="Examples">示例</h4>
<p>向所有使用索引颜色的To indicate that a style sheet should apply to all devices using indexed color, you can do:</p>
<pre class="brush: css">
@media all and (color-index) { ... }
</pre>
<p>To apply a style sheet to indexed color devices with at least 256 colors:</p>
<pre class="brush: html">
&lt;link rel="stylesheet" media="all and (min-color-index:&nbsp;256)" href="http://foo.bar.com/stylesheet.css" /&gt;
</pre>
<h3 id="aspect-ratio">aspect-ratio</h3>
<p><strong>Value:</strong> {{ xref_cssratio() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepts min/max prefixes:</strong> yes</p>
<p>Describes the aspect ratio of the targeted display area of the output device.&nbsp; This value consists of two positive integers separated by a slash ("/")&nbsp;character.&nbsp; This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p>
<h4 id="Example">Example</h4>
<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p>
<pre class="brush: css">
@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
<p>This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.</p>
<h3 id="device-aspect-ratio">device-aspect-ratio</h3>
<p><strong>Value:</strong> {{ xref_cssratio() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepts min/max prefixes:</strong> yes</p>
<p>Describes the aspect ratio of the output device.&nbsp; This value consists of two positive integers separated by a slash ("/")&nbsp;character.&nbsp; This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).</p>
<h4 id="Example">Example</h4>
<p>The following selects a special style sheet to use for widescreen displays.</p>
<pre class="brush: css">
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre>
<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p>
<h3 id="device-height">device-height</h3>
<p><strong>Value:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepts min/max prefixes:</strong> yes</p>
<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p>
<h4 id="Example">Example</h4>
<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p>
<pre class="brush: html">
&lt;link rel="stylesheet"&nbsp;media="screen and (max-device-width: 799px)" /&gt;
</pre>
<h3 id="device-width">device-width</h3>
<p><strong>Value:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepts min/max prefixes:</strong> yes</p>
<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p>
<h3 id="grid">grid</h3>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> all<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>Determines whether the output device is a grid device or a bitmap device.&nbsp; If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1.&nbsp; Otherwise it is zero.</p>
<h4 id="Example">Example</h4>
<p>To apply a style to handheld devices with a 15-character or narrower display:</p>
<pre class="brush: css">
@media handheld and (grid) and (max-width: 15em) { ... }
</pre>
<div class="note">
  <strong>Note:</strong> The "em"&nbsp;unit has a special meaning for grid devices; since the exact width of an "em"&nbsp;can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.</div>
<h3 id="height">height</h3>
<p><strong>Value:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepts min/max prefixes:</strong> yes</p>
<p>The <code>height</code> media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).</p>
<div class="note">
  <strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div>
<h3 id="monochrome">monochrome</h3>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> yes</p>
<p>Indicates the number of bits per pixel on a monochrome (greyscale)&nbsp;device.&nbsp; If the device isn't monochrome, the device's value is 0.</p>
<h4 id="Examples">Examples</h4>
<p>To apply a style sheet to all monochrome devices:</p>
<pre class="brush: css">
@media all and (monochrome) { ... }
</pre>
<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p>
<pre class="brush: css">
@media all and (min-monochrome: 8) { ... }
</pre>
<h3 id="orientation">orientation</h3>
<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>Indicates whether the device is in landscape (the display is wider than it is tall)&nbsp;or portrait (the display is taller than it is wide)&nbsp;mode.</p>
<h4 id="Example">Example</h4>
<p>To apply a style sheet only in portrait orientation:</p>
<pre class="brush: css">
@media all and (orientation:&nbsp;portrait) { ... }</pre>
<h3 id="resolution">resolution</h3>
<p><strong>Value:</strong> {{ Xref_cssresolution() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssbitmap() }}<br />
  <strong>Accepts min/max prefixes:</strong> yes</p>
<p>Indicates the resolution (pixel density) of the output device.&nbsp; The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).</p>
<h4 id="Example">Example</h4>
<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p>
<pre class="brush: css">
@media print and (min-resolution: 300dpi) { ... }
</pre>
<p>To replace the old <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">(min-device-pixel-ratio: 2)&nbsp;</span>syntax:</p>
<pre class="brush: css">
@media screen and (min-resolution: 2dppx) { ... }</pre>
<h3 id="scan">scan</h3>
<p><strong>Value:</strong> <code>progressive</code> |&nbsp;<code>interlace</code><br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_csstv() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>Describes the scanning process of television output devices.</p>
<h4 id="Example">Example</h4>
<p>To apply a style sheet only to progressive scanning televisions:</p>
<pre class="brush: css">
@media tv and (scan: progressive) { ... }
</pre>
<h3 id="width">width</h3>
<p><strong>Value:</strong> {{ Xref_csslength() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}, {{ Xref_csstactile() }}<br />
  <strong>Accepts min/max prefixes:</strong> yes</p>
<p>The <code>width</code> media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).</p>
<div class="note">
  <strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div>
<h4 id="Examples">Examples</h4>
<p>If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:</p>
<pre class="brush: css">
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
</pre>
<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p>
<pre class="brush: html">
&lt;link rel="stylesheet" media="print and (min-width:&nbsp;8.5in)"
    href="http://foo.com/mystyle.css" /&gt;
</pre>
<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p>
<pre class="brush: css">
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
</pre>
<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2>
<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p>
<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS&nbsp;<a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the user has configured their device to use the "Graphite" appearance on Mac OS&nbsp;X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS&nbsp;X, this is 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}</p>
<p><strong>Value:</strong> {{ xref_cssnumber() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> yes</p>
<p>Gives the number of device pixels per CSS pixel.</p>
<div class="geckoVersionNote style-wrap">
  <p><strong>Do not use this feature. </strong></p>
  <p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br />
    <br />
    <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p>
  <p>Example:</p>
  <pre>
@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 */ </pre>
  <p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p>
</div>
<div class="note">
  <strong>Note</strong>: This media feature is also implemented by Webkit as <span style="font-family: Courier New;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: Courier New;">min--moz-device-pixel-ratio</span> and <span style="font-family: Courier New;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: Courier New;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: Courier New;">-webkit-max-device-pixel-ratio</span>.</div>
<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p>
<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>Indicates which operating system version is currently being used. Currently only implemented on&nbsp;Windows. Possible values are:</p>
<ul>
  <li><code>windows-xp</code></li>
  <li><code>windows-vista</code></li>
  <li><code>windows-win7</code></li>
  <li><code>windows-win8</code></li>
</ul>
<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p>
<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<h4 id="Example">Example</h4>
<p>You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.</p>
<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the user is using Windows with the DWM&nbsp;compositor, this is 1; otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p>
<p><strong>Value:</strong> {{ xref_cssinteger() }}<br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.</p>
<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p>
<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br />
  <span style="font-weight: bold;">Media</span><strong>:</strong> {{ Xref_cssvisual() }}<br />
  <strong>Accepts min/max prefixes:</strong> no</p>
<p>Indicates which Windows theme is currently being used. Only available on&nbsp;Windows. Possible values are:</p>
<ul>
  <li><code>aero</code></li>
  <li><code>luna-blue</code></li>
  <li><code>luna-olive</code></li>
  <li><code>luna-silver</code></li>
  <li><code>royale</code></li>
  <li><code>generic</code></li>
  <li><code>zune</code></li>
</ul>
<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatChrome("21") }}</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }}</td>
        <td>{{ CompatIE("9.0") }}</td>
        <td>{{ CompatOpera("9") }}</td>
        <td>{{ CompatSafari("4") }}</td>
      </tr>
      <tr>
        <td>grid</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }} (<code>grid</code> media type is not supported)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>resolution</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }} supports {{ xref_cssinteger() }} values;<br />
          {{ CompatGeckoDesktop("8.0") }} supports {{ xref_cssnumber() }} values, as per the spec.</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td>scan</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}&nbsp;(<code>tv</code> media type is not supported)</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li>
  <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li>
  <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li>
</ul>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
Revert to this revision