@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
(en-US).
Sintaxis
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.
- 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 (en-US), 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.
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
Non-Standard
|
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
Non-Standard
|
¿Se soportan transformaciones 3D? |
No estándar; Específica de WebKit/Blink |
-webkit-transform-2d
Non-Standard
|
¿Se soportan transformaciones 2D? |
No estándar; Específica de WebKit |
-webkit-transition
Non-Standard
|
Se soportan transiciones CSS? |
No estándar; Específica de WebKit |
-webkit-animation
Non-Standard
|
¿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 |
---|---|---|
Compatibility Standard La definición de 'CSS Media Queries' en esta especificación. |
Living Standard | Estandariza las características -webkit-device-pixel-ratio y -webkit-transform-3d . |
CSS Conditional Rules Module Level 3 La definición de '@media' en esta especificación. |
Candidate Recommendation | Define la sintaxis básica de la regla @media . |
Media Queries Level 4 La definición de '@media' en esta especificación. |
Candidate Recommendation |
Se agregan las características |
Media Queries La definición de '@media' en esta especificación. |
Recommendation | Sin cambios. |
CSS Level 2 (Revision 1) La definición de '@media' en esta especificación. |
Recommendation | Definición inicial. |
Compatibilidad de navegadores
BCD tables only load in the browser
Véase también
- Media queries
- El modelo CSSOM
CSSMediaRule
(en-US) asociado a esta regla-at.