manual de referência CSS

CSS @regras (RULES)

大全 de propriedades CSS

Regra @media CSS

The @media rule can be used to define style rules for multiple media types within a single stylesheet. It must be followed by a comma-separated list of media types and a block containing the rules.

Using the @media rule, you can define different styles for different media types.

@media pode definir estilos diferentes para diferentes tamanhos de tela, especialmente se você precisar configurar uma página responsiva, @media é muito útil.

Quando você ajusta o tamanho do navegador, a página também será renderizada novamente com base na largura e na altura do navegador.

Sintaxe de uso da regra @media em CSS

A sintaxe da regra é a seguinte:

@media　media　type,...　{
　　　　/*　mídia-regras específicas　*/
}

Você também pode usar diferentes estilos CSS para diferentes mídias:

<link　rel="stylesheet"　media="mediatype　and|not|only　(media　feature)"　href="style.css">

O exemplo a seguir demonstra como usar a propriedade @media.

Exemplo

@media　screen{
body　{
color:　#32cd32;
		　　font-family:　Arial,　sans-serif;
font-size:　14px;
}
}
@media　print　{
body　{
color:　#ff6347;
		　　font-family:　Times,　serif;
font-size:　12pt;
}
}
@media　screen,　print　{
body　{
line-height:　1.2;
}
}

Teste para ver‹/›

Atenção:Regras de estilo @media aplicam a todos os tipos de mídia aos quais a tabela de estilos se aplica. Regras internas @media em CSS2.1Inálido em meio

Tipo de mídia

Valor	Descrição
all	Usado para todos os dispositivos
aural	Descontinuado. Usado para sintetizadores de voz e som
braille	Descontinuado. Aplicado a dispositivos táteis em Braille
embossed	Descontinuado. Usado para dispositivos de impressão em Braille para cegos
handheld	Descontinuado. Usado para dispositivos portáteis ou dispositivos menores, como PDA e telefones pequenos
print	Usado para impressoras e visualização de impressão
projection	Descontinuado. Usado para dispositivos de projeção
screen	Usado para computadores, tablets, smartphones e outros
speech	Aplicado a dispositivos de leitura de tela e outros dispositivos de reprodução de voz
tty	Descontinuado. Usado para grid de caracteres fixos, como telegráficos, dispositivos de terminal e dispositivos portáteis com restrições de caracteres
tv	Descontinuado. Usado para TV e TV por assinatura

Função de mídia

Valor	Descrição
aspect-ratio	Razão entre a largura e a altura da área visível da página no dispositivo de saída
color	Número de componentes coloridos em每组 do dispositivo de saída. Se não for um dispositivo colorido, o valor é igual a 0
color-index	Número de entradas na tabela de consulta de cores do dispositivo de saída. Se não for usada tabela de consulta de cores, o valor é igual a 0
dispositivo-aspect-ratio	Define a taxa de largura e altura visível da tela do dispositivo de saída.
dispositivo-altura	Define a altura visível da tela do dispositivo de saída.
dispositivo-largura	Define a largura visível da tela do dispositivo de saída.
grade	Usado para consultar se o dispositivo de saída usa grade ou matriz de pontos.
altura	Define a altura da área visível da página no dispositivo de saída.
max-aspect-ratio	Define a taxa máxima de largura e altura da tela visível do dispositivo de saída.
max-color	Define o número máximo de componentes de cores em每组 do dispositivo de saída.
max-color-index	Define o número máximo de entradas na tabela de consulta de cores do dispositivo de saída.
max-dispositivo-aspect-ratio	Define a taxa máxima de largura e altura da tela visível do dispositivo de saída.
max-dispositivo-altura	Define a altura máxima da tela visível do dispositivo de saída.
max-dispositivo-largura	Define a largura máxima da tela do dispositivo de saída.
max-altura	Define a altura máxima da área visível da página no dispositivo de saída.
max-monocromático	Define o número máximo de componentes monocromáticos por pixel em um buffer de área de exibição monocromática.
max-resolução	Define a resolução máxima do dispositivo.
max-largura	Define a largura máxima da área visível da página no dispositivo de saída.
min-aspect-ratio	Define a taxa mínima de largura e altura da área visível da página no dispositivo de saída.
min-color	Define o número mínimo de componentes de cores em每组 do dispositivo de saída.
min-color-index	Define o número mínimo de entradas na tabela de consulta de cores do dispositivo de saída.
min-dispositivo-aspect-ratio	Define a taxa mínima de largura e altura da tela do dispositivo de saída.
min-dispositivo-largura	Define a largura mínima da tela do dispositivo de saída.
min-dispositivo-altura	Define a altura mínima da tela do dispositivo de saída.
min-altura	Define a altura mínima da área visível da página no dispositivo de saída.
min-monocromático	Define o número mínimo de componentes monocromáticos por pixel em um buffer de área de exibição monocromática.
min-resolução	Define a resolução mínima do dispositivo.
min-largura	Define a largura mínima da área visível da página no dispositivo de saída.
monocromático	Define o número de componentes monocromáticos por pixel em um buffer de área de exibição monocromática. Se o dispositivo não for monocromático, o valor é 0
orientação	Define se a área visível da página no dispositivo de saída é maior ou igual à largura.
resolução	Define a resolução do dispositivo. Por exemplo:96dpi, 300dpi, 118dpcm
scan	Define o processo de escaneamento para dispositivos de TV.
largura	Define a largura da área visível da página no dispositivo de saída.

Compatibilidade do navegador

Compatibilidade do navegador com a propriedade @media, os números na tabela a seguir representam a versão mínima do navegador que suporta essa propriedade; todos os navegadores populares suportam essa regra.

	Firefox 1+ Google Chrome1+ Internet Explorer 9+ Apple Safari 1.3+ Opera 9.2+