El atributo de medios de origen HTML acepta cualquier consulta de medios válida que normalmente se definiría en un CSS. Este atributo puede aceptar varios valores.
Sintaxis:
<source media="media_query">
Operadores posibles:
Valor | Descripción |
---|---|
y | Y operador |
no | NO operador |
, | O operador |
Dispositivos:
Valor | Descripción |
---|---|
todos | Apto para todos los dispositivos |
auditivo | sintetizadores de voz |
braille | Dispositivos de retroalimentación braille |
Mano | Dispositivos portátiles (pantalla pequeña, ancho de banda limitado) |
proyección | Proyectores |
impresión | Modo de vista previa de impresión/páginas impresas |
pantalla | pantallas de computadora |
tty | Teletipos y medios similares que utilizan una cuadrícula de caracteres de paso fijo |
televisión | Dispositivos de baja resolución o capacidad de desplazamiento limitada como la televisión. |
Valores:
Valor | Descripción |
---|---|
ancho | Ancho del área de visualización objetivo. |
altura | Altura del área de visualización objetivo |
ancho del dispositivo | Pantalla de destino o ancho del papel. |
altura del dispositivo | Pantalla de destino o altura del papel. |
orientación | Pantalla de destino u orientación del papel. |
relación de aspecto | Relación ancho/alto del área de visualización de destino. |
relación de aspecto del dispositivo | Proporción de dispositivo-ancho/dispositivo-alto de la pantalla/papel de destino. |
color | Bits por color de la pantalla de destino. |
Indice de color | Número de colores que puede manejar la pantalla de destino. |
monocromo | Bits por píxel en un búfer de cuadro monocromático. |
resolución | Densidad de píxeles (ppp o dpcm) de la pantalla/papel de destino. |
escanear | Método de escaneo de una pantalla de televisión. |
cuadrícula | Si el dispositivo de salida es cuadrícula o mapa de bits. |
Nota: Se pueden usar prefijos como «min-« y «max-» .
Ejemplo:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <picture> <source media="(min-width: 600px)" srcset="img1.png"> <source media="(min-width: 400px)" srcset="img2.png"> <img src="img3.png" style="width:auto;"> </picture> </body> </html>
Salida: cambia el tamaño del navegador.
Navegadores compatibles: los navegadores compatibles con el atributo de medios de origen HTML se enumeran a continuación:
- Google Chrome
- Borde 12.0
- Internet Explorer 9.0
- Firefox 15.0
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA