@media

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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 condicionales.

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

Sintaxis

@media = 
  @media <media-query-list> { <rule-list> }

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 a material paginado y documentos visibles en una 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.

Nota: CSS2.1 y Media Queries 3 definió varios tipos de media adicionales (tty, tv, projection, handheld, braille, embossed, aural, speech), 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` Obsoleto	Anchura de la superficie de representación del dispositivo	Descontinuado en Media Queries Nivel 4
`device-height` Obsoleto	Altura de la superficie de representación del dispositivo	Descontinuado en Media Queries Nivel 4
`device-aspect-ratio` Obsoleto	Relación de aspecto anchura-altura del dispositivo	Descontinuado en Media Queries Nivel 4
`-webkit-device-pixel-ratio` No estándar	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` No estándar	¿Se soportan `transformaciones` 3D?	No estándar; Específica de WebKit/Blink
`-webkit-transform-2d` No estándar	¿Se soportan `transformaciones` 2D?	No estándar; Específica de WebKit
`-webkit-transition` No estándar	Se soportan `transiciones` CSS?	No estándar; Específica de WebKit
`-webkit-animation` No estándar	¿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

Specification
Media Queries Level 4 # media-descriptor-table
CSS Conditional Rules Module Level 3 # at-media

Compatibilidad con navegadores

Véase también

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