A regra @media, introduzida no CSS2, tornou possível definir diferentes regras de estilo para diferentes tipos de mídia.
Exemplos: você poderia ter um conjunto de regras de estilo para telas de computador, um para impressoras, uma para dispositivos portáteis, uma para dispositivos do tipo televisão e assim por diante.
Infelizmente, esses tipos de mídia nunca tiveram muito suporte por parte dos dispositivos, outros do que o tipo de mídia de impressão.
Consultas de mídia em CSS3 ampliaram a ideia de tipos de mídia CSS2: em vez de procurar um tipo de dispositivo, eles olham para 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 um estilo personalizado planilha para desktops, laptops, tablets e telefones celulares (como telefones iPhone e Android).
Os números na tabela especificam a primeira versão do navegador que suporta totalmente a regra @media.
| Property | |||||
|---|---|---|---|---|---|
| @media | 21.0 | 9.0 | 3.5 | 4.0 | 9.0 |
Uma consulta de mídia consiste em um tipo de mídia e pode conter um ou mais expressões, que resolvem para verdadeiro ou falso.
@media not|only mediatype and (expressions) {
CSS-Code;
}O resultado da consulta é verdadeiro se o tipo de mídia especificado corresponder ao tipo de dispositivo em que o documento está sendo exibido e todas as expressões na consulta de mídia são verdadeiras. Quando uma consulta de mídia é verdadeira, a folha de estilos ou regras de estilo correspondentes são aplicado, seguindo as regras normais de cascata.
A menos que você use os operadores not ou only, o tipo de mídia é opcional e o todos os tipos estarão implícitos.
Você também pode ter folhas de estilo diferentes para mídias diferentes:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">Usado para todos os dispositivos de tipo de mídia
Usado para impressoras
Usado para telas de computador, tablets, smartphones etc.
Usado para leitores de tela que “lêem” a página em voz alta
Uma maneira de usar consultas de mídia é ter uma seção CSS alternativa dentro de sua folha de estilos.
O exemplo a seguir altera a cor de fundo para verde claro se o a janela de visualização tiver 480 pixels de largura ou mais (se a janela de visualização for menor que 480 pixels, a cor de fundo será rosa):
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the viewport is 480px wide or wider.</p>
</body>
</html>
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 for menor que 480 pixels, o menu ficará por cima do conteúdo):
@media screen and (min-width: 480px) {
#leftsidebar
{width: 200px; float: left;}
#main
{margin-left: 216px;}
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
#menulist {
margin: 0;
padding: 0;
}
.menuitem {
background: #CDF0F6;
border: 1px solid #d4d4d4;
border-radius: 4px;
list-style-type: none;
margin: 4px;
padding: 2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
</div>
</div>
</body>
</html>
Para obter muito mais exemplos de consultas de mídia, vá para a próxima página: Exemplos de CSS MQ.
Para uma visão geral completa de todos os tipos de mídia e recursos/expressões, consulte o Regra @media em nossa referência CSS.