Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

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

Compatibilidad de navegadores

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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: israel-munoz, fscholz, teoli, sanathy
 Última actualización por: israel-munoz,