@media

Resumen

La regla-at CSS @media asocia un grupo de declaraciones anidadas, en un bloque CSS delimitado por llaves, con una condición definida por un media query. La regla-at @media puede ser usada no solo en el nivel superior de la hoja de estilos, sino también dentro de cualquier grupo de reglas conditionales.

La regla-at @media puede ser accesible por medio de la interfaz de modelo de objeto CSSMediaRule.

Sintaxis

@media <media-query-list> {
  <group-rule-body>
}

Un <media-query> está compuesto por un tipo de medio opcional y/o un conjunto de características de medio.

Tipos de medios

all: Aplicable a todos los dispositivos.
print: Destinado material paginado y para documentos visibles en pantalla en modo de vista previa para impresión. Por favor, consulte la sección de medios paginados, y la sección de Media en el tutorial de Introducción para más información acerca de problemas de formateo específicos para los medios paginados.
screen: Destinado a principalmente a pantallas de computadora a color.
speech: Destinado a sintetizadores de voz. Nota: CSS2 tenía un tipo de medio similar llamado 'aural' para este propósito. Vea el apéndice sobre hojas de estilo aural para más detalles.

Nota: CSS2.1 y Media Queries 3 definió varios tipos de media adicionales (tty, tv, projection, handheld, braille, embossed, aural), pero fueron descontinuados en Media Queries 4 y no deben ser usados.

Características de Medios (media feature)

Cada característica de medios verifica una característica específica del navegador o dispositivo.

Nombre	Resumen	Notas
`width`	Anchura del viewport
`height`	Altura del viewport
`aspect-ratio`	Relación de aspecto anchura-altura del viewport
`orientation`	Orientación del viewport
`resolution`	Densidad de pixeles del dispositivo
`scan`	Proceso de escaneo del dispositivo
`grid`	¿El dispositivo es un grid o un mapa de bits?
`update-frequency`	Qué tan rápido (si lo hace) puede el dispositivo modificar la apariencia del contenido	Incluido en Media Queries Nivel 4
`overflow-block`	Cómo maneja el dispositivo el contenido que excede los límites del viewport a lo largo del eje de bloque	Incluido en Media Queries Nivel 4
`overflow-inline`	¿Puede desplazarse hacia el contenido que excede los límites del viewport?	Incluido en Media Queries Nivel 4
`color`	Componente de número de bits por color del dispositivo, o cero si el dispositivo no es a color.
`color-index`	Número de entradas en la tabla de búsqueda de color del dispositivo, o cero si el dispositivo no usa una tabla.
`display-mode`	Modo de visualización de la aplicación, según se especifique en la propiedad display del manifiesto de la aplicación web.	Definido en la especificación del Manifiesto de Aplicación Web.
`monochrome`	Bits por pixel en el buffer de marco monocromático del dispositivo, o 0 si el dispositivo no es monocromático.
`inverted-colors`	¿El agente usuario o el Sistema Operativo está invirtiendo los colores?	Incluido en Media Queries Nivel 4
`pointer`	¿El mecanismo de entrada principal es un dispositivo apuntador? y de ser así, ¿qué tan preciso es?	Incluido en Media Queries Nivel 4
`hover`	¿El mecanismo de entrada principal permite que el usuario posicione el puntero sobre los elementos?	Incluido en Media Queries Nivel 4
`any-pointer`	¿Hay algún mecanismo de entrada que sea dispositivo apuntador? y de ser así, ¿qué tan preciso es éste?	Incluido en Media Queries Nivel 4
`any-hover`	¿Algún mecanismo de entrada disponible permite que el usuario posicione el puntero sobre los elementos?	Incluido en Media Queries Nivel 4
`light-level`	Nivel de luz ambiental actual	Incluido en Media Queries Nivel 4
`scripting`	¿Se soporta lenguaje de script (p.ej. JavaScript)?	Incluido en Media Queries Nivel 4
`device-width`	Anchura de la superficie de representación del dispositivo	Descontinuado en Media Queries Nivel 4
`device-height`	Altura de la superficie de representación del dispositivo	Descontinuado en Media Queries Nivel 4
`device-aspect-ratio`	Relación de aspecto anchura-altura del dispositivo	Descontinuado en Media Queries Nivel 4
`-webkit-device-pixel-ratio`	Número de pixeles reales del dispositivo por pixel CSS	No estándar; Específica de WebKit/Blink. De ser posible, use la característica `resolution en su lugar`.
`-webkit-transform-3d`	¿Se soportan `transformaciones` 3D?	No estándar; Específica de WebKit/Blink
`-webkit-transform-2d`	¿Se soportan `transformaciones` 2D?	No estándar; Específica de WebKit
`-webkit-transition`	Se soportan `transiciones` CSS?	No estándar; Específica de WebKit
`-webkit-animation`	¿Se soportan `animaciones` CSS?	No estándar; Específica de WebKit

Ejemplos

@media print {
  body { font-size: 10pt }
}
@media screen {
  body { font-size: 13px }
}
@media screen, print {
  body { line-height: 1.2 }
}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    body { line-height: 1.4 }
}

Especificaciones

Especificación	Estado	Comentarios
Web Compatibility Standard The definition of 'CSS Media Queries' in that specification.	Living Standard	Estandariza las características `-webkit-device-pixel-ratio` y `-webkit-transform-3d`.
CSS Conditional Rules Module Level 3 The definition of '@media' in that specification.	Candidate Recommendation	Define la sintaxis básica de la regla `@media`.
Media Queries Level 4 The definition of '@media' in that specification.	Working Draft	Se agregan las características `scripting`, `pointer`, `hover`, `light-level`, `update-frequency`, `overflow-block`, y `overflow-inline`. Se descontinúan todos los tipos de medios excepto `screen`, `print`, `speech`, y `all`.
Media Queries The definition of '@media' in that specification.	Recommendation	Sin cambios.
CSS Level 2 (Revision 1) The definition of '@media' in that specification.	Recommendation	Definición inicial.

Característica	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Soporte básico (`all`, `print`, `screen`)	1.0	1.0 (1.7 or earlier)	6.0	9.2	1.3
`speech`	No support	No support	No support	9.2	No support
Media features (características de medios)	1.0	1.0 (1.7 or earlier)	9.0	9.2	1.3
Característica `display-mode`	?	47 (47)	?	?	?

Característica	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Soporte básico (`all`, `print`, `screen`)	1.0	1.0 (1.7)	(Yes)	9.0	3.1
`speech`	No support	No support	No support	9.0	No support
Media features (características de medios)	1.0	1.0 (1.7)	(Yes)	9.0	3.1
Característica `display-mode`	?	(Yes)	?	?	?

Véase también

Media queries
El modelo CSSOM CSSMediaRule asociado a esta regla-at.