@media
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 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
Loading…
Véase también
- Media queries
- El modelo CSSOM
CSSMediaRuleasociado a esta regla-at.