Manual de Referência HTML

大全 de Etiquetas HTML

Atributo media do elemento source do HTML

A propriedade media do elemento source aceita qualquer consulta de mídia válida que seja usualmente definida no CSS, a propriedade media pode aceitar múltiplos valores.

　HTML <source> etiqueta

Exemplo Online

Elemento <picture> com dois arquivos de origem e uma imagem de reserva:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso do atributo source media no HTML-Tutorial Básico(oldtoolbag.com)</title>
<meta name="viewport" content="largura=device-width, inicial-scale=1.0">
</head>
<body>
<picture>
　　<source media="(min-largura:　650px)" srcset="img_pink_flowers.jpg">
　　<source media="(min-largura:　465px)" srcset="img_white_flower.jpg">
　　<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>Ajuste o tamanho do navegador para ver diferentes versões de imagens carregadas em diferentes tamanhos de viewport. O navegador buscará o primeiro elemento source que correspondente à consulta de mídia com a largura atual da viewport do usuário e obterá a imagem especificada no atributo srcset.</p>
<p>O elemento img é o último sub-elemento do bloco de declaração de imagem. O elemento img é usado para fornecer compatibilidade reversa para navegadores que não suportam o elemento picture ou não têm um elemento de origem correspondente.
</p>
</body>
</html>

teste e veja ‹/›

compatibilidade do navegador

IEFirefoxOperaChromeSafari

todos os navegadores populares suportam a propriedade media. Nota: IE12e versões mais antigas ou Safari 9.0 e versões mais antigas não suportam o elemento picture

definição e uso

a propriedade media aceita qualquer consulta de mídia válida tipicamente definida no CSS.

Nota:esta propriedade pode aceitar múltiplos valores.

HTML 4.01 com o HTML5diferenças

A etiqueta <source> é do HTML5 nova etiqueta no meio de <source>.

sintaxe

<source media="valor>

operadores possíveis

valor	descrição
and	especificar um operador AND.
not	especificar um operador NOT.
,	especificar um operador OR.

dispositivo

valor	descrição
all	padrão. Aplicável a todos os dispositivos.
aural	sintetizador de voz.
braille	dispositivos de feedback em braile.
handheld	dispositivos portáteis (tela pequena, largura de banda limitada).
projection	projetor.
print	modo de pré-visualização de impressão/página impressa.
screen	tela de computador.
tty	telegráficos e outros meios que usam uma grade de caracteres de largura fixa.
tv	dispositivos de TV (baixa resolução, capacidade de rolagem limitada).

valor

valor	descrição
largura	largura da área de exibição de destino especificada Pode usar "min-" e "max-" é prefixo. Exemplo: media="screen and (min-largura:500px)"
altura	altura da área de exibição de destino especificada Pode usar "min-" e "max-" é prefixo. Exemplo: media="screen and (max-altura:700px)"
device-largura	Especificar o monitor alvo/largura do papel. Pode usar "min-" e "max-" é prefixo. Exemplo: media="screen and (device-largura:500px)"
device-altura	Especificar o monitor alvo/altura do papel. Pode usar "min-" e "max-" é prefixo. Exemplo: media="screen and (device-altura:500px)"
orientation	Especificar o monitor alvo/orientação do papel. Valores possíveis: "portrait" ou "landscape". Exemplo: media="all and (orientation: landscape)"
aspect-ratio	largura da área de exibição de destino especificada/ration de altura. Pode usar "min-" e "max-" é prefixo. Exemplo: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	Especificar o monitor alvo/device da papel-largura/device-ration height. Pode usar "min-" e "max-" é prefixo. Exemplo: media="screen and (aspect-ratio:16/9)"
color	bits especificados para o monitor de destino/cor. Pode usar "min-" e "max-" é prefixo. Exemplo: media="screen and (color:3)"
color-index	Especificar o número de cores que o monitor alvo pode manipular. Pode usar "min-" e "max-" é prefixo. Exemplo: media="screen and (min-color-index:256)"
monochrome	Especificar os bits no buffer de frame monocromático/pixel. Pode usar "min-" e "max-" é prefixo. Exemplo: media="screen and (monochrome:2)"
resolution	Especificar o monitor alvo/Densidade de pixels do papel (dpi ou dpcm). Pode usar "min-" e "max-" é prefixo. Exemplo: media="print and (resolution:300dpi)"
scan	Especificar o modo de escaneamento do monitor de TV. Valores possíveis: "progressive" e "interlace". Exemplo: media="tv and (scan:interlace)"
grade	Especificar se o dispositivo de saída é grade ou bitmap. Valores possíveis:"1" é grade, caso contrário é "0". Exemplo: media="handheld and (grid:1)"

　HTML <source> etiqueta

HTML: <template> etiqueta