CSS media queries

  • Enlace amigable (slug) de la revisión: CSS/Media_queries
  • Título de la revisión: CSS media queries
  • Id de la revisión: 355675
  • Creada:
  • Creador: maedca
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

Una media query consiste en un tipo de medio y almenos una consultaque limita las hojas de estilo utilizando caracteristicas del medio como ancho, alto y color. Añadido en CSS3, las media queries dejan que la presentación del contenido adaptarse a un rango especifico de dispositivos de salida sin tener que cambiar el contenido en sí.

Sintaxis

Las Media queries consisten de un media type y  una o mas expresiones, implicando caracteristicas del medio, la cual se resuelve ya sea verdadera o falsa. El resultado de la consulta es verdaderea si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas.

Cuando una media query is verdadera, la hoja de estilo correspondiente o reglas de estilos son aplicadas, siguiendo las reglas normales de cascada.

Cuando not ni only son usadas dentro de una madia query, el tipo de medio es opcional y será interpretada como all.

Operadores Lógicos

tu puedes redactar media queris utilizando operadores lógicos, incluyendo not, and, y only.

Además, tu puedes combinar  multiples medias queries en una lista separada por comas multiples; si cualquiera de las medias queris en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".

The not keyword negates the result of the query; "all and (not color)" is true for monochrome devices regardless of media type, for example.

The only keyword hides style sheets from older browsers that don't support media queries:

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

Operator precedence

The not operator has a very low precedence.  For example, the not is evaluated last in the following query:

@media not all and (-moz-windows-compositor) { ... }

This means that the query is evaluated like this:

@media not (all and (-moz-windows-compositor)) { ... }

... rather than like this:

@media (not all) and (-moz-windows-compositor) { ... }

 

As another example, look at the following media query:

@media not screen and (color), print and (color)

It is evaluated like this:

@media (not (screen and (color))), print and (color)

Pseudo-BNF (for those of you that like that kind of thing)

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

Media queries are case insensitive.  Media queries involving unknown media types are always false.

Note: Parentheses are required around expressions; failing to use them is an error.

Media features

Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints.  This avoids using the "<" and ">" symbols, which would conflict with HTML and XML.  If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.

Note: If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.  For example, querying the aspect ratio of an aural device always results in false.

color

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

Indicates the number of bits per color component of the output device.  If the device is not a color device, this value is zero.

Note: If the color components have different numbers of bits per color component, the smallest number is used.  For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component.  If the device uses indexed colors, the minimum number of bits per color component in the color table is used.

Examples

To apply a style sheet to all color devices:

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

To apply a style sheet to devices with at least 4 bits per color component:

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

color-index

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

Indicates the number of entries in the color look-up table for the output device.

Examples

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.

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) { ... }

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.

{{ h2_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.

{{ h2_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.

{{ h2_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.

{{ h2_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 browser that doesn't 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 */

For browsers not supporting dppx nor the non-standard prefixed min-device-pixel-ratio, like Opera and IE, you should translate dppx in dpi: 192 dpi = 2 dppx.

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.

{{ h2_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.

{{ h2_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.

{{ h2_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.

{{ h2_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.

{{ h2_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.

{{ h2_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.

{{ h2_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.

{{ h2_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.

{{ h2_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.

{{ h2_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

Fuente de la revisión

<p>Una <strong>media query</strong> consiste en un tipo de medio y almenos una consultaque limita las hojas de estilo utilizando caracteristicas del medio como ancho, alto y color. Añadido en <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, las media queries dejan que la presentación del contenido adaptarse a un rango especifico de dispositivos de salida sin tener que cambiar el contenido en sí.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<p>Las Media queries consisten de un <a class="internal" href="/en/CSS/@media" title="En/CSS/@media">media type</a> y&nbsp; una o mas expresiones, implicando caracteristicas del medio, la cual se resuelve ya sea verdadera o falsa. El resultado de la consulta es verdaderea si el tipo de medio especificado en el media query concuerda con el tipo de dispositivo que está siendo mostrado y todas las expresiones en el media query son verdaderas.</p>
<p>Cuando una media query is verdadera, la hoja de estilo correspondiente o reglas de estilos son aplicadas, siguiendo las reglas normales de cascada.</p>
<p>Cuando <code>not</code> ni <code>only</code> son usadas dentro de una madia query, el tipo de medio es opcional y será interpretada como<code> all.</code></p>
<h3 id="Operadores_L.C3.B3gicos">Operadores Lógicos</h3>
<p>tu puedes redactar media queris utilizando operadores lógicos, incluyendo <code>not</code>, <code>and</code>, y <code>only</code>.</p>
<p>Además, tu puedes combinar&nbsp; multiples medias queries en una lista separada por comas multiples; si cualquiera de las medias queris en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".</p>
<p>The <code>not</code> keyword negates the result of the query; "<span style="font-family: monospace;">all</span><code> and (not color)</code>" is true for monochrome devices regardless of media type, for example.</p>
<p>The <code>only</code> keyword hides style sheets from older browsers that don't support media queries:</p>
<pre>
&lt;link rel="stylesheet"&nbsp;media="only screen and (color)" href="example.css" /&gt;
</pre>
<h3 id="Operator_precedence">Operator precedence</h3>
<p>The <code>not</code> operator has a very low precedence.&nbsp; For example, the <code>not</code> is evaluated last in the following query:</p>
<pre>
@media not all and (-moz-windows-compositor) {&nbsp;... }
</pre>
<p>This means that the query is evaluated like this:</p>
<pre>
@media not (all and (-moz-windows-compositor)) { ... }
</pre>
<p>... rather than like this:</p>
<pre>
@media (not all) and (-moz-windows-compositor) { ... }
</pre>
<p>&nbsp;</p>
<p>As another example, look at the following media query:</p>
<pre>
@media not screen and (color), print and (color)
</pre>
<p>It is evaluated like this:</p>
<pre>
@media (not (screen and (color))), print and (color)
</pre>
<h3 id="Pseudo-BNF_(for_those_of_you_that_like_that_kind_of_thing)">Pseudo-BNF (for those of you that like that kind of thing)</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>Media queries are case insensitive.&nbsp; Media queries involving unknown media types are always false.</p>
<div class="note">
  <strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div>
<h2 id="Media_features">Media features</h2>
<p>Most media features can be prefixed with "min-"&nbsp;or "max-" to express "greater or equal to"&nbsp;or "less than or equal to" constraints.&nbsp; This avoids using the "&lt;" and "&gt;"&nbsp;symbols, which would conflict with&nbsp;HTML&nbsp;and XML.&nbsp; If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.</p>
<div class="note">
  <strong>Note:</strong> If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.&nbsp; For example, querying the aspect ratio of an aural device always results in false.</div>
<h3 id="color">color</h3>
<p><strong>Value:</strong> {{ Xref_csscolorvalue() }}<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 color component of the output device.&nbsp; If the device is not a color device, this value is zero.</p>
<div class="note">
  <strong>Note:</strong> If the color components have different numbers of bits per color component, the smallest number is used.&nbsp; For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component.&nbsp; If the device uses indexed colors, the minimum number of bits per color component in the color table is used.</div>
<h4 id="Examples">Examples</h4>
<p>To apply a style sheet to all color devices:</p>
<pre>
@media all and (color) { ... }
</pre>
<p>To apply a style sheet to devices with at least 4 bits per color component:</p>
<pre>
@media all and (min-color: 4) { ... }
</pre>
<h3 id="color-index">color-index</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 entries in the color look-up table for the output device.</p>
<h4 id="Examples">Examples</h4>
<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p>
<pre>
@media all and (color-index) { ... }
</pre>
<p>To apply a style sheet to indexed color devices with at least 256 colors:</p>
<pre>
&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>
@media screen and (min-aspect-ratio: 1/1) { ... }</pre>
<p>This selects the style when the aspect ratio is either 1:1 or greater.</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>
@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>
&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>
@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>
@media all and (monochrome) { ... }
</pre>
<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p>
<pre>
@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>
@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>
@media print and (min-resolution: 300dpi) { ... }
</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>
@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>
@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>
&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>
@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>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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 browser that doesn't 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 */</pre>
  <p>For browsers not supporting <code>dppx</code> nor the non-standard prefixed <code>min-device-pixel-ratio</code>, like Opera and IE, you should translate <code>dppx</code> in <code>dpi</code>: <code>192 dpi = 2 dppx</code>.</p>
  <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>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/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>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p>
<p>{{ h2_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/CSS/@media" title="En/CSS/@media">Media types</a></li>
  <li><a href="/en/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li>
</ul>
Revertir a esta revisión