Atributo media do elemento HTML <source>
Definição e uso
media O atributo aceita qualquer consulta de mídia válida que seja usualmente definida no CSS.
Atenção:Este atributo pode aceitar vários valores.
Exemplo
Um elemento <picture> que contém dois arquivos de origem e uma imagem de reserva:
<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>
Sintaxe
<source media="media_query>
Operadores possíveis
| Operadores | Descrição |
|---|---|
| and | Define o operador AND. |
| not | Define o operador NOT. |
| , | Define o operador OR. |
Dispositivo
| Valor | Descrição |
|---|---|
| all | Padrão. Apropriado para todos os dispositivos. |
| aural | Sintetizador de voz. |
| braille | Dispositivo de feedback em braile. |
| handheld | Dispositivos portáteis (tela pequena, largura de banda limitada). |
| projection | Projetor. |
| Modo de visualização de impressão preliminar/página de impressão. | |
| screen | Tela de computador. |
| tty | Máquina de escrever telegráfica e mídias semelhantes que usam uma grade de caracteres de largura fixa. |
| tv | Dispositivos de tipo TV (baixa resolução, capacidade de paginação limitada). |
Valor
| Valor | Descrição |
|---|---|
| width |
Define a largura da área de exibição alvo. Prefixos "min-" e "max-" podem ser usados. Exemplo: media="screen and (min-width:500px" |
| height |
Define a altura da área de exibição alvo. Prefixos "min-" e "max-" podem ser usados. Exemplo: media="screen and (max-height:700px" |
| device-width |
Define a largura do monitor/papel alvo. Prefixos "min-" e "max-" podem ser usados. Exemplo: media="screen and (device-width:500px" |
| device-height |
Define a altura do monitor/papel alvo. Prefixos "min-" e "max-" podem ser usados. Exemplo: media="screen and (device-height:500px" |
| orientation |
Define a orientação do monitor/papel alvo. Valores possíveis: "portrait" ou "landscape" Exemplo: media="all and (orientation: landscape" |
| aspect-ratio |
Define a proporção largura/altura da área de exibição alvo. Prefixos "min-" e "max-" podem ser usados. Exemplo: media="screen and (aspect-ratio:16/9" |
| device-aspect-ratio |
Define a proporção device-width/device-height do monitor/papel alvo. Prefixos "min-" e "max-" podem ser usados. Exemplo: media="screen and (aspect-ratio:16/9" |
| color |
Define o número de bits de cada cor do monitor alvo. Prefixos "min-" e "max-" podem ser usados. Exemplo: media="screen and (color:3" |
| color-index |
Define o número de cores que o monitor alvo pode processar. Prefixos "min-" e "max-" podem ser usados. Exemplo: media="screen and (min-color-index:256" |
| monochrome |
Define o número de bits por pixel em um buffer de frame monocromático. Prefixos "min-" e "max-" podem ser usados. Exemplo: media="screen and (monochrome:2)" |
| resolution |
Define a densidade de pixels do monitor/papel alvo (dpi ou dpcm). Prefixos "min-" e "max-" podem ser usados. Exemplo: media="print and (resolution:300dpi)" |
| scan |
Define o método de escaneamento do monitor de TV. Valores possíveis são: "progressive" e "interlace". Exemplo: media="tv and (scan:interlace)" |
| grade |
Define se o dispositivo de saída é grade ou bitmap. Valores possíveis: "1" representa grade, "0" é outro. Exemplo: media="handheld and (grid:1)" |
Suporte do navegador
Os números na tabela indicam a versão do navegador que suporta completamente essa propriedade pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 38.0 | 9.0 | 15.0 | 9.1 | 25.0 |
