Query de mídia do CSS
- Página anterior Flexbox do CSS
- Próxima página Exemplo de query de mídia do CSS
O CSS2 introduziu tipos de mídia
O CSS2 introduziu @media Regras que permitem definir regras de estilo diferentes para diferentes tipos de mídia.
Por exemplo: você pode ter um conjunto de regras de estilo para telas de computador, um conjunto para impressoras, um conjunto para dispositivos móveis, até mesmo um conjunto para TVs, e assim por diante.
Infelizmente, além do tipo de mídia de impressão, esses tipos de mídia nunca receberam suporte em larga escala por dispositivos.
O CSS3 introduziu consultas de mídia
As consultas de mídia do CSS3 expandem o conceito de tipos de mídia do CSS2: em vez de procurar o tipo de dispositivo, elas se concentram nas capacidades do dispositivo.
As consultas de mídia podem ser usadas para verificar muitas coisas, por exemplo:
- Largura e altura da janela de exibição
- Largura e altura do dispositivo
- Orientação (se o tablet ou smartphone está em modo horizontal ou vertical)
- Resolução
O uso de consultas de mídia é uma técnica popular que permite fornecer folhas de estilo personalizadas para desktops, laptops, tablets e smartphones (por exemplo, iPhones e smartphones Android).
Suporte do navegador
Os números na tabela indicam suporte completo @media Versão inicial do navegador que suporta as regras.
| Atributo | |||||
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Sintaxe das consultas de mídia
As consultas de mídia consistem em um tipo de mídia e podem conter uma ou mais expressões, que podem ser avaliadas como true ou false.
@media not|only mediatype and (expressões) {
CSS-Code;
}
Se o tipo de mídia especificado coincidir com o tipo de dispositivo que está exibindo o documento e todas as expressões na consulta de mídia forem true, o resultado da consulta será true. Quando a consulta de mídia for true, aplicará a tabela de estilos ou regras de estilo correspondentes e seguirá as regras normais de cascata.
A menos que você use os operadores not ou only, o tipo de mídia é opcional e implícito all Tipos.
Você também pode usar diferentes folhas de estilo para diferentes mídias:
<link rel="stylesheet" media="mediatype and|not|only (expressões)" href="print.css">
Tipos de mídia do CSS3
| Valor | Descrição |
|---|---|
| all | Usado para todos os tipos de dispositivos de mídia. |
| Usado para impressoras. | |
| screen | Usado em computadores de tela, tablets, smartphones e outros. |
| speech | Usado por leitores de tela para “ler” a página em voz alta. |
Exemplo simples de consulta de mídia
Um método para usar consultas de mídia é ter um bloco CSS alternativo dentro da tabela de estilos.
O exemplo a seguir altera a cor de fundo para verde claro quando a largura da janela for de 480 pixels ou maior (se a largura da janela for menor que 480 pixels, a cor de fundo será rosa):
Exemplo
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
O exemplo a seguir mostra um menu, que flutua para a esquerda da página se a largura da janela for de 480 pixels ou maior (se a largura da janela for menor que 480 pixels, o menu ficará na parte superior do conteúdo):
Exemplo
@media screen and (min-width: 480px) {
#leftsidebar {largura: 200px; flutuante: esquerda;}
#main {margin-left: 216px;}
}
Mais exemplos de queries de mídia
Para mais exemplos de queries de mídia, acesse a próxima página:Exemplo de MQ do CSS.
Manual de referência do CSS @media
Para uma descrição completa de todos os tipos de mídia e características/expressões, consulte nossa Regra @media na referência do CSS.
- Página anterior Flexbox do CSS
- Próxima página Exemplo de query de mídia do CSS
