Consultas de mídia CSS
Tipos de mídia introduzidos CSS2
A @mediaregra, introduzida no CSS2, possibilitou definir diferentes regras de estilo para diferentes tipos de mídia.
Exemplos: Você pode ter um conjunto de regras de estilo para telas de computador, um para impressoras, um para dispositivos portáteis, um para dispositivos do tipo televisão e assim por diante.
Infelizmente, esses tipos de mídia nunca tiveram muito suporte por dispositivos, além do tipo de mídia de impressão.
Consultas de mídia introduzidas no CSS3
As consultas de mídia em CSS3 estenderam a ideia de tipos de mídia CSS2: em vez de procurar um tipo de dispositivo, elas analisam a capacidade do dispositivo.
As consultas de mídia podem ser usadas para verificar muitas coisas, como:
- largura e altura da janela de visualização
- largura e altura do dispositivo
- orientação (o tablet/telefone está no modo paisagem ou retrato?)
- resolução
O uso de consultas de mídia é uma técnica popular para fornecer uma folha de estilo personalizada para desktops, laptops, tablets e telefones celulares (como telefones iPhone e Android).
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente a @mediaregra.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Sintaxe de consulta de mídia
Uma consulta de mídia consiste em um tipo de mídia e pode conter uma ou mais expressões, que são resolvidas como verdadeiras ou falsas.
@media not|only mediatype and (expressions) {
CSS-Code;
}
O resultado da consulta será verdadeiro se o tipo de mídia especificado corresponder ao tipo de dispositivo no qual o documento está sendo exibido e todas as expressões na consulta de mídia forem verdadeiras. Quando uma consulta de mídia é verdadeira, a folha de estilo ou as regras de estilo correspondentes são aplicadas, seguindo as regras normais de cascata.
A menos que você use os operadores not ou only, o tipo de mídia é opcional e o
alltipo será implícito.
Você também pode ter diferentes folhas de estilo para diferentes mídias:
<link rel="stylesheet" media="mediatype and|not|only (expressions)"
href="print.css">
Tipos de mídia CSS3
| Value | Description |
|---|---|
| all | Used for all media type devices |
| Used for printers | |
| screen | Used for computer screens, tablets, smart-phones etc. |
| speech | Used for screenreaders that "reads" the page out loud |
Exemplos simples de consultas de mídia
Uma maneira de usar consultas de mídia é ter uma seção CSS alternativa dentro de sua folha de estilo.
O exemplo a seguir altera a cor de fundo para verde claro se a janela de visualização tiver 480 pixels de largura ou mais (se a janela de visualização tiver menos de 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 flutuará à esquerda da página se a janela de visualização tiver 480 pixels de largura ou mais (se a janela de visualização tiver menos de 480 pixels, o menu estará na parte superior do conteúdo):
Exemplo
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}
Mais exemplos de consulta de mídia
Para muito mais exemplos de consultas de mídia, vá para a próxima página: Exemplos de CSS MQ .
Referência CSS @media
Para uma visão geral completa de todos os tipos de mídia e recursos/expressões, consulte a regra @media em nossa referência CSS .