Propriedade media <link> HTML

Etiqueta <link> HTML

Definição e uso

media A propriedade define para que mídia/dispositivo o recurso alvo foi otimizado.

media A propriedade especifica em que dispositivo o documento vinculado será exibido.

Esta propriedade é principalmente usada com folhas de estilo CSS, para especificar estilos diferentes para diferentes tipos de mídia.

media A propriedade pode aceitar vários valores.

Exemplo

Dois estilos de folha de estilo diferentes para dois tipos diferentes de mídia (tela e impressão):

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
  
<link rel="stylesheet" type="text/css" href="print.css" media="print">

</head>

Experimente pessoalmente

Sintaxe<link media="value

>

Operadores possíveis Descrição
Operadores and
Define o operador AND. not
Define o operador NOT. ,

Define o operador OR.

Define o operador OR. Descrição
Dispositivo all
Padrão. Usado para todos os tipos de dispositivos de mídia. print
Usado para visualização de impressão prévia/página de impressão. screen
Usado em computadores, tablets, smartphones e outros. speech
Leitor de tela para leitura de páginas. Descontinuado.aural
Sintetizador de voz. Descontinuado.braille
Dispositivo de feedback em braile. Descontinuado.handheld
Dispositivo portátil (pequeno painel, largura de banda limitada). Descontinuado.Projetor.
tty Descontinuado.Máquinas de teletipo e mídias semelhantes que usam grade de espaçamento fixo.
tv Descontinuado.Dispositivos de tipo TV (baixa resolução, capacidade de rolagem limitada).

Valores

Valores Descrição
aspect-ratio

Define a proporção largura/altura da área de exibição alvo.

É possível usar os prefixos "min-" e "max-".

Exemplo: media="screen and (aspect-ratio:16/9)"
color

Define o número de bits de cada cor no monitor alvo.

É possível usar os prefixos "min-" e "max-".

Exemplo: media="screen and (color:3)"
color-index

Define o número de cores que o monitor alvo pode processar.

É possível usar os prefixos "min-" e "max-".

Exemplo: media="screen and (min-color-index:256)"
device-aspect-ratio Descontinuado.Define a proporção device-width/device-height do monitor/papel alvo.
device-width Descontinuado.Define a largura do monitor/papel alvo.
device-height Descontinuado.Define a altura do monitor/papel alvo.
grid

Define se o dispositivo de saída é uma grade ou bitmap.

Valores possíveis: "1" representa grade, "0" representa outros.

Exemplo: media="handheld and (grid:1)"
height

Define a altura da área de exibição alvo.

É possível usar os prefixos "min-" e "max-".

Exemplo: media="screen and (max-height:700px)"
monochrome

Define cada bit de pixel no buffer de frame monocromático.

É possível usar os prefixos "min-" e "max-".

Exemplo: media="screen and (monochrome:2)"
orientação

Define a orientação do monitor/papel alvo.

Os valores possíveis são: "portrait" ou "landscape".

Exemplo: media="all and (orientation: landscape)"
resolução

Define a densidade de pixels do monitor/papel alvo (dpi ou dpcm).

É possível usar os prefixos "min-" e "max-".

Exemplo: media="print and (resolution:300dpi)"
scan

Define o método de escaneamento do monitor de TV.

Os valores possíveis são: "progressive" e "interlace".

Exemplo: media="tv and (scan:interlace)"
largura

Define a largura da área de exibição do alvo.

É possível usar os prefixos "min-" e "max-".

Exemplo: media="screen and (min-width:500px)"

Suporte de navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte

Etiqueta <link> HTML