Manual de referencia HTML

大全 de etiquetas HTML

Atributo media del elemento source en HTML

El atributo media del elemento source acepta cualquier consulta de medios válida que se defina comúnmente en CSS, el atributo media puede aceptar múltiples valores.

　HTML <source> etiqueta

Ejemplo en línea

Elemento <picture> con dos archivos de origen y una imagen de reserva:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso del atributo source media en HTML-Tutoriales básicos(oldtoolbag.com)</<title>
<meta name="viewport" content="width=device-width, inicial-scale=1.0">
</<head>
<body>
<picture>
　　<source media="(min-width:　650px)" srcset="img_pink_flowers.jpg">
　　<source media="(min-width:　465px)" srcset="img_white_flower.jpg">
　　<img src="img_orange_flowers.jpg" alt="Flores" style="width:auto;">
</picture>
<p>Ajuste el tamaño del navegador para ver las diferentes versiones de las imágenes que se cargan en diferentes tamaños de vista. El navegador buscará el primer elemento source que coincida con la consulta de medios con el ancho de la vista actual del usuario y obtendrá la imagen especificada en la propiedad srcset.</p>
<p>El elemento img es el último subetiqueta del bloque de declaración de imágenes. El elemento img se utiliza para proporcionar compatibilidad con el retroceso para los navegadores que no admiten el elemento picture o que no tienen una etiqueta fuente coincidente.
</p>
</body>
</html>

Prueba para ver ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Todos los navegadores principales admiten la propiedad media. Nota: IE12y versiones anteriores o Safari 9.0 y versiones anteriores no admiten el elemento picture

Definición y uso

La propiedad media acepta cualquier consulta de medios válida que se defina comúnmente en CSS.

Nota:Esta propiedad puede aceptar múltiples valores.

HTML 4.01 y HTML5diferencias entre

<source> es una etiqueta de HTML5 nueva etiqueta en <source>.

sintaxis

<source media="value>

operadores posibles

valor	descripción
and	especificar un operador AND.
not	especificar un operador NOT.
,	especificar un operador OR.

dispositivo

valor	descripción
all	por defecto. Aplicable a todos los dispositivos.
aural	sintetizador de voz.
braille	dispositivos de retroalimentación en braille.
handheld	dispositivos portátiles (pantalla pequeña, ancho de banda limitado).
projection	proyector.
print	modo de vista previa de impresión/página impresa.
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 televisión de tipo (baja resolución, capacidad de desplazamiento limitada).

valor

valor	descripción
width	ancho especificado para la región de visualización del objetivo Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="screen and (min-width:500px)"
height	altura especificada para la región de visualización del objetivo Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="screen and (max-height:700px)"
device-width	Especificar el monitor objetivo/ancho del papel Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="screen and (device-width:500px)"
device-height	Especificar el monitor objetivo/altura del papel Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="screen and (device-height:500px)"
orientation	Especificar el monitor objetivo/dirección del papel Valores posibles: "portrait" o "landscape"。 Ejemplo: media="all and (orientation: landscape)"
aspect-ratio	ancho especificado para la región de visualización del objetivo/ratio de altura. Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Especificar el monitor objetivo/device de papel-width/device-ratio de altura. Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="screen and (aspect-ratio:16/9)"
color	bits especificados para la pantalla de destino/color。 Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="screen and (color:3)"
color-index	Especificar la cantidad de colores que puede manejar el monitor objetivo. Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="screen and (min-color-index:256)"
monochrome	Especificar los bits en el búfer de color monocromático./pixel. Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="screen and (monochrome:2)"
resolution	Especificar el monitor objetivo/La densidad de píxeles del papel (dpi o dpcm). Se puede usar "min-" y "max-" es prefijo. Ejemplo: media="print and (resolution:300dpi)"
scan	Especificar el modo de escaneo del monitor tv. Valores posibles: "progressive" y "interlace". Ejemplo: media="tv and (scan:interlace)"
grid	Especificar si el dispositivo de salida es rejilla o bitmap. Valores posibles:"1" es para rejilla, de lo contrario es "0". Ejemplo: media="handheld and (grid:1)"

　HTML <source> etiqueta

HTML: <template> etiqueta