Atributo media do HTML <area>
Definição e uso
media A propriedade define qual tipo de mídia ou dispositivo foi otimizado para o documento vinculado.
Esta propriedade é usada para definir que o URL de destino é projetado para dispositivos específicos (como iPhone), mídia de voz ou mídia impressa.
Este atributo pode aceitar vários valores.
apenas quando existir Atributo href ao usar.
Atenção:Esta propriedade é puramente sugerencial.
Exemplo
Usar a propriedade media para especificar o tipo de mídia ou dispositivo para o qual o URL de destino está otimizado:
<map name="planetmap"> <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html" media="screen and (min-color-index:256)" </map>
Sintaxe
<area media="value>
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 | Dispositivo portátil (pequena tela, largura de banda limitada). |
| projection | Projetor. |
| Modo de visualização de impressão prevista/impressão de página. | |
| screen | Tela de computador. |
| tty | Teletipo 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 manipular. 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 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 a grade, "0" é outro. Exemplo: media="handheld and (grid:1)" |
Suporte de navegador
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Suporte | Suporte | Suporte | Suporte | Suporte |
