HTML | <fuente> atributo multimedia

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *