Atributo media no estilo HTML

Etiqueta <style> HTML

Definição e uso

media Atributo usado para definir o meio / dispositivo alvo das estilos CSS (otimizado).

Este atributo é usado para definir estilos aplicáveis a dispositivos específicos (como iPhone), mídia de voz ou impressão.

Dica:Este atributo pode aceitar vários valores.

Exemplo

Exemplo 1

Estilos definidos para impressão:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Experimente pessoalmente

Exemplo 2

Os estilos de两组 são distinguidos usando a característica width da propriedade media:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Experimente pessoalmente

Notas:O primeiro grupo de estilos é usado quando a largura da janela do navegador é menor que 500 pixels, e o segundo grupo de estilos é usado quando a largura da janela é maior que 500 pixels.

Sintaxe

<style media="value">

Operadores possíveis

Operadores Descrição
and Operador AND definido.
not Operador NOT definido.
, Operador OR definido.

As condições de uso do estilo podem ser projetadas de maneira muito detalhada. O que precisa ser claro primeiro é o tipo de dispositivo alvo. A tabela a seguir resume todos os valores que atendem aos requisitos:

Dispositivo

Dispositivo 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 visualização de impressão previa / página de impressão.
screen Tela de computador.
tty Teletipos e outros meios semelhantes que usam uma grade de caracteres com espaçamento fixo.
tv Dispositivos de TV (baixa resolução, capacidade de rolagem limitada).

O navegador é responsável por interpretar a classificação de dispositivos. Alguns tipos de dispositivos (por exemplo, screen e print) têm uma interpretação relativamente consistente em todos os navegadores, mas outros dispositivos (como handheld) podem ter interpretações mais variáveis. Portanto, verificar se a interpretação do navegador para dispositivos específicos é consistente com a sua é muito necessário.

Características

Características Descrição
width

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

Pode usar os prefixos "min-" e "max-".

Por exemplo: media="screen and (min-width:500px)"
height

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

Pode usar os prefixos "min-" e "max-".

Por exemplo: media="screen and (max-height:700px)"
device-width

Define a largura do monitor/papel de destino.

Pode usar os prefixos "min-" e "max-".

Por exemplo: media="screen and (device-width:500px)"
device-height

Define a altura do monitor/papel de destino.

Pode usar os prefixos "min-" e "max-".

Por exemplo: media="screen and (device-height:500px)"
orientation

Define a orientação do monitor/papel de destino.

Os valores suportados: portrait ou landscape.

Essa característica não tem qualificadores.

Por exemplo: media="all and (orientation: landscape)"
aspect-ratio

Define a relação largura/altura da área de exibição de destino.

Pode usar os prefixos "min-" e "max-".

Por exemplo: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Define a relação largura/altura do dispositivo do monitor/papel.

Pode usar os prefixos "min-" e "max-".

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

Define o número de bits por cor no monitor de destino.

Pode usar os prefixos "min-" e "max-".

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

Define o número de cores que o monitor de destino pode manipular.

Pode usar os prefixos "min-" e "max-".

Por exemplo: media="screen and (min-color-index:256)"
monochrome

Define o número de bits por pixel no buffer de frames monocromático.

Pode usar os prefixos "min-" e "max-".

Por exemplo: media="screen and (monochrome:2)"
resolution

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

Pode usar os prefixos "min-" e "max-".

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

Define o modo de escaneamento do televisor.

Os valores suportados são progressive e interlace.

Essa característica não tem qualificadores.

Por exemplo: media="tv and (scan:interlace)"
grade

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

Os dispositivos de grade exibem conteúdo em uma grade fixa, como terminais baseados em caracteres e aparelhos de paging que exibem uma linha única.

Os valores suportados são 0 e 1 (1 representa dispositivos de grade).

Essa característica não tem qualificadores.

Por exemplo: media="handheld and (grid:1)"

Características como width geralmente são usadas com os qualificadores min e max. Sem esses qualificadores, o uso do estilo pode depender de tamanhos de janela muito precisos, mas com os qualificadores, a condição se torna mais flexível.

A tabela a seguir lista e descreve várias características disponíveis. A menos que especificado, essas características podem ser usadas com min- e max- para formar limites em vez de valores precisos.

Como os recursos são interpretados pelos navegadores, que são responsáveis por essas características, bem como quando estão disponíveis e podem ser usados, pode ser complexo. Se você quiser aplicar estilos com base nessas características, certifique-se de realizar testes completos e estar preparado para estilos alternativos em caso de não disponibilidade dessas características.

Suporte ao navegador

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

Etiqueta <style> HTML