English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
A propriedade link media especifica qual tipo de mídia o recurso alvo é destinado/Dispositivos otimizados, este atributo geralmente é usado com tabelas de estilo CSS para especificar estilos diferentes para tipos diferentes de mídia.
Duas tabelas de estilos diferentes para dois tipos diferentes de mídia (tela e impressão):
!DOCTYPE html> <html> <head> <meta charset="utf-8> <title>Uso do atributo "hreflang" do HTML <link>-Tutoriais básicos(oldtoolbag.com)</title> <link rel="stylesheet" type="text/css" href="demo_screen.css"> <link rel="stylesheet" type="text/css" href="demo_print.css" media="print"> </head> <body> <h1>oldtoolbag.com Exemplo</h1> <p><a href="tryhtml_link_media.html" target="_blank">Clique aqui</a> Abrir esta página em uma nova janela (sem a parte tryit).</p> <p>Se você imprimir esta página ou abri-la no pré-visualizador de impressão, verá que ela usa a tabela de estilo "media="print"" para o estilo. A tabela de estilo "print" contém texto preto em fundo branco.</p> </body> </html>Teste e veja ‹/›
IEFirefoxOperaChromeSafari
Todos os navegadores populares suportam a propriedade media.
A propriedade media especifica qual tipo de mídia o recurso alvo está destinado/o dispositivo foi otimizado.
Este atributo geralmente é usado com folhas de estilo CSS, para especificar estilos diferentes para tipos de mídia diferentes.
A propriedade media pode aceitar múltiplos valores.
A propriedade media agora suporta mais valores.
<link media="value>
| Valor | Descrição |
|---|---|
| and | Define um operador AND. |
| not | Define um operador NOT. |
| , | Define um operador OR. |
| 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. |
| Modo de pré-visualização de impressão/Página impressa. | |
| screen | Tela do 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 | Descrição |
|---|---|
| width | Define a largura da área de exibição alvo Pode usar "min-" e "max-" sufixo. Exemplo: media="screen and (min-width:500px)" |
| height | Define a altura da área de exibição alvo Pode usar "min-" e "max-" sufixo. Exemplo: media="screen and (max-height:700px)" |
| device-width | Define o monitor de destino/A largura do papel。 Pode usar "min-" e "max-" sufixo. Exemplo: media="screen and (device-width:500px)" |
| device-height | Define o monitor de destino/A altura do papel。 Pode usar "min-" e "max-" sufixo. Exemplo: media="screen and (device-height:500px)" |
| orientation | Define o monitor de destino/O orientação do papel。 Valores possíveis: "portrait" ou "landscape"。 Exemplo: media="all and (orientation: landscape)" |
| aspect-ratio | Define a largura da área de exibição alvo/height ratio。 Pode usar "min-" e "max-" sufixo. Exemplo: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Define o monitor de destino/o device da papel-width/device-height ratio。 Pode usar "min-" e "max-" sufixo. Exemplo: media="screen and (aspect-ratio:16/9)" |
| cor | Define os bits do display alvo/color。 Pode usar "min-" e "max-" sufixo. Exemplo: media="screen and (color:3)" |
| cor-índice | Define o número de cores que o monitor de destino pode manipular. Pode usar "min-" e "max-" sufixo. Exemplo: media="screen and (min-cor-índice:256)" |
| monocromático | Define os bits do buffer de frames monocromáticos./pixel. Pode usar "min-" e "max-" sufixo. Exemplo: media="screen and (monochrome:2)" |
| resolução | Define o monitor de destino/densidade de pixels do papel (dpi ou dpcm). Pode usar "min-" e "max-" sufixo. Exemplo: media="print and (resolution:300dpi)" |
| escaneamento | Define o modo de escaneamento do monitor TV. Valores possíveis: "progressive" e "interlace". Exemplo: media="tv and (scan:interlace)" |
| rede | Define se o dispositivo de saída é uma rede ou bitmap. Valores possíveis:"1" é rede, caso contrário é "0". Exemplo: media="handheld and (grid:1)" |