Atributo media del elemento <source> de HTML
Definición y uso
media La propiedad acepta cualquier consulta de medios válida que se defina comúnmente en CSS.
Nota:Esta propiedad puede aceptar múltiples valores.
Ejemplo
Un elemento <picture> que contiene dos archivos de origen y una imagen de respaldo:
<picture> <source media="(min-width:650px)" srcset="flower-1.jpg"> <source media="(min-width:465px)" srcset="flower-2.jpg"> <img src="flower-3.jpg" alt="Flowers" style="width:auto;"> </picture>
Sintaxis
<source media="media_query>
Operadores posibles
| Operadores | Descripción |
|---|---|
| and | Se especifica el operador AND. |
| not | Se especifica el operador NOT. |
| , | Se especifica el operador OR. |
Dispositivo
| Valor | Descripción |
|---|---|
| all | Por defecto. Adecuado para todos los dispositivos. |
| aural | Sintetizador de voz. |
| braille | Dispositivo de retroalimentación en braille. |
| handheld | Dispositivos portátiles (pantalla pequeña, ancho de banda limitado). |
| projection | Proyector. |
| Modo de previsualización de impresión/página de impresión. | |
| screen | Pantalla de computadora. |
| tty | Máquinas telegráficas y otros medios que utilizan una cuadrícula de caracteres de ancho fijo. |
| tv | Dispositivos de tipo televisión (baja resolución, capacidad de paginación limitada). |
Valor
| Valor | Descripción |
|---|---|
| width |
Se especifica el ancho de la área de visualización objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (min-width:500px" |
| height |
Se especifica la altura de la área de visualización objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (max-height:700px" |
| device-width |
Se especifica el ancho del monitor/papel objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (device-width:500px" |
| device-height |
Se especifica la altura del monitor/papel objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (device-height:500px" |
| orientation |
Se especifica la orientación del monitor/papel objetivo. Valores posibles: "portrait" o "landscape" Ejemplo: media="all and (orientation: landscape" |
| aspect-ratio |
Se especifica la proporción de ancho/alto de la área de visualización objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (aspect-ratio:16/9" |
| device-aspect-ratio |
Se especifica la proporción de ancho/alto del dispositivo de visualización/papel. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (aspect-ratio:16/9" |
| color |
Se especifica el número de bits para cada color del monitor objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (color:3" |
| color-index |
Se especifica el número de colores que puede manejar el monitor objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (min-color-index:256" |
| monochrome |
Define el número de bits por píxel en el búfer de cuadros monocromáticos. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (monochrome:2)" |
| resolution |
Define la densidad de píxeles del monitor/papel objetivo (dpi o dpcm). Se pueden usar prefijos "min-" y "max-". Ejemplo: media="print and (resolution:300dpi)" |
| scan |
Define el método de escaneo del monitor de TV. Valores posibles: "progressive" y "interlace". Ejemplo: media="tv and (scan:interlace)" |
| grid |
Define si el dispositivo de salida es una rejilla o un mapa de bits. Valores posibles: "1" representa la rejilla, "0" es otro. Ejemplo: media="handheld and (grid:1)" |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
