Resumen

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

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

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 demedios paginados, y lasecció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.

Características de Medios (media feature)

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

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

Compatibilidad con navegadores

Véase también

• Media queries
• El modelo CSSOMCSSMediaRule asociado a esta regla-at.