Regra CSS @media
Use a regra at-rule @media para aplicar estilos com base em media queries. Aprenda a usar essa propriedade com exemplos práticos.
A regra at-rule @media aplica um bloco de estilos apenas quando uma media query avalia como verdadeira — por exemplo, somente em telas mais estreitas que um celular, ou apenas quando um documento é impresso. Ela é a base do design responsivo: uma única folha de estilos que se adapta a desktops, laptops, tablets e celulares, em vez de entregar um site separado para cada dispositivo.
Esta página aborda a sintaxe do @media, os tipos de mídia e as características de mídia disponíveis, como combinar condições com operadores lógicos e exemplos interativos que você pode redimensionar para ver o efeito.
Como uma media query é construída
Uma media query tem duas partes:
- Um tipo de mídia opcional —
all,print,screenouspeech— que direciona uma categoria de dispositivo. - Uma ou mais características de mídia entre parênteses, como
(min-width: 768px), que testam uma condição como awidthdo viewport, suaheight, orientação ou resolução.
Se o tipo de mídia corresponder ao dispositivo atual e cada característica avaliar como verdadeira, os estilos dentro do bloco são aplicados. Uma característica de mídia se parece com uma propriedade CSS (nome: valor), mas testa uma condição em vez de estilizar um elemento diretamente.
Quando devo usar isso? Sempre que quiser que o layout, o espaçamento ou a visibilidade mudem com base no dispositivo — empilhando colunas em celulares, ocultando uma barra lateral em telas pequenas ou removendo cores de fundo ao imprimir uma página.
Em JavaScript, a interface CSSMediaRule representa uma única regra @media e pode ser usada para ler ou modificar regras criadas com @media.
Sintaxe
CSS @media
@media <media-query> {
/* styles */
}As media queries podem combinar múltiplas condições usando operadores lógicos: and, not, only e vírgula (,).
Exemplo da regra @media:
CSS @media code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (max-width: 411px) {
body {
background-color: #cce5ff;
}
}
@media screen and (min-width: 768px) {
body {
background-color: #eee;
}
}
@media screen and (max-width: 962px) and (min-width: 450px),
(min-width: 1366px) {
body {
background-color: #333;
}
}
</style>
</head>
<body>
<h2>@media rule example</h2>
<p>Resize the browser to see the effect.</p>
<p>The background color changes based on the viewport width: light blue for screens up to 411px, light gray for 768px and wider, and dark gray for screens between 450px and 962px, or 1366px and wider.</p>
</body>
</html>Resultado
No exemplo a seguir, quando a largura do navegador está entre 500 e 800px ou acima de 1000px, a aparência do <div> muda. Redimensione a janela do navegador para ver o efeito.
Exemplo da regra @media com aparência alterada de <div>:
CSS @media multiple queries example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #1c87c9;
}
@media screen and (min-width: 200px) {
body {
background-color: #8ebf42;
}
}
@media screen and (min-width: 600px) {
body {
background-color: #ccc;
}
}
@media screen and (max-width: 800px) and (min-width: 500px),
(min-width: 1000px) {
div.box {
font-size: 50px;
padding: 50px;
border: 8px solid #000;
background: #eee;
}
}
</style>
</head>
<body>
<h2>@media rule example</h2>
<p>Media queries set the background-color to grey if the viewport is 600 pixels wide or wider, to green if the viewport is between 200 and 599 pixels wide. If the viewport is smaller than 200 pixels, the background-color is blue.</p>
<h3>Change the appearance of DIV on different screen sizes</h3>
<div class="box">DIV</div>
</body>
</html>Combinando condições com operadores lógicos
As media queries podem encadear múltiplas condições:
and— todas as condições devem ser verdadeiras:@media screen and (min-width: 768px).,(vírgula) — funciona comoor; os estilos se aplicam se alguma query separada por vírgula corresponder:@media (max-width: 600px), (min-width: 1200px).not— nega uma query inteira:@media not all and (monochrome).only— oculta a query de navegadores muito antigos que não entendem características de mídia; não tem efeito em navegadores modernos, mas é inofensivo incluí-lo.
Tipos de Mídia
| Valor | Descrição |
|---|---|
| all | Este valor é usado para todos os dispositivos. É o valor padrão desta propriedade. |
| É usado para impressoras. | |
| screen | É usado para telas coloridas de computador. |
| speech | É usado para leitores de tela. |
Exemplo de uso de media para ocultar um elemento em dispositivos muito pequenos:
CSS @media Rule
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<style>
@media (max-width: 767px) {
.hide-mobile {
display: none;
}
}
</style>
</head>
<body>
<h1>Hi</h1>
<p>There is some text for example.</p>
<p class="hide-mobile">This text will be hidden on large devices.</p>
<p>There is some text for example.</p>
</body>
</html>Exemplo de uso de media para alterar a cor de fundo do conteúdo em diferentes dispositivos.
CSS @media Rule
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@media screen and (max-width: 767px) {
.content {
background-color: lightblue;
padding: 30px;
}
}
@media screen and (min-width: 768px) {
.content {
background-color: pink;
padding: 10px;
}
}
@media screen and (min-width: 800px) {
.content {
background-color: lightgreen;
color: white;
padding: 50px;
}
}
</style>
</head>
<body>
<div class="content">
<h2>Resize the browser to see the effect.</h2>
<p>
CSS is a rule-based language, which means that you define
rules specifying groups of styles applying to particular
elements or groups of elements on the web page.
</p>
</div>
</body>
</html>Características de Mídia
As características de mídia testam uma característica específica do dispositivo ou viewport. As mais comuns no design responsivo do dia a dia são as baseadas em width — min-width e max-width — mas a lista completa abaixo abrange tudo, desde a orientação do dispositivo até a profundidade de cor e o mecanismo de entrada. Características de intervalo (width, height, aspect-ratio, color, resolution, monochrome) também aceitam os prefixos min- e max-.
| Valor | Descrição |
|---|---|
| width | A largura do viewport. |
| height | A altura do viewport. |
| orientation | A orientação do viewport. |
| aspect-ratio | A razão entre o valor da característica de mídia "width" e o valor da característica de mídia "height". |
| grid | Verifica se o dispositivo de saída é grade ou bitmap. |
| color | O número de bits por componente de cor do dispositivo de saída. Se o dispositivo não for colorido, o valor é 0. |
| color-gamut | O intervalo aproximado de cores suportado pelo agente de usuário e pelo dispositivo de saída. |
| inverted-colors | Verifica se o navegador ou o sistema operacional inverte as cores ou não. |
| hover | Verifica se o mecanismo de entrada principal permite ao usuário passar o cursor sobre elementos ou não. |
| any-hover | Verifica se algum mecanismo de entrada disponível permite ao usuário passar o cursor sobre elementos ou não. |
| any-pointer | Verifica se algum mecanismo de entrada disponível é um dispositivo apontador ou não. |
| light-level | O nível de luz do ambiente. |
| max-aspect-ratio | A proporção máxima entre a largura e a altura da área de exibição. |
| max-color | O número máximo de bits por componente de cor para o dispositivo de saída. |
| max-height | A altura máxima da área de exibição. |
| max-monochrome | O número máximo de bits por cor em um dispositivo monocromático. |
| max-resolution | A resolução máxima do dispositivo. |
| max-width | A largura máxima da área de exibição. |
| min-aspect-ratio | A proporção mínima entre a largura e a altura da área de exibição. |
| min-color | O número mínimo de bits por componente de cor para o dispositivo de saída. |
| min-height | A altura mínima da área de exibição. |
| min-monochrome | O número mínimo de bits por cor em um dispositivo monocromático. |
| min-resolution | A resolução mínima do dispositivo. |
| min-width | A largura mínima da área de exibição. |
| overflow-block | Verifica como o dispositivo de saída lida com conteúdo que ultrapassa o viewport ao longo do eixo de bloco. |
| overflow-inline | Verifica se o conteúdo que ultrapassa o viewport ao longo do eixo inline pode ser rolado ou não. |
| pointer | Verifica se o mecanismo de entrada principal é um dispositivo apontador ou não. |
| resolution | Descreve a resolução do dispositivo de saída. |
| scripting | Verifica se scripts estão disponíveis ou não. |
| update | Verifica com que rapidez o dispositivo de saída pode modificar a aparência do conteúdo. |