Regra @media do CSS

Definição e uso

A regra @media é usada nas consultas de mídia para aplicar estilos diferentes para diferentes tipos de mídia/dispositivos.

As consultas de mídia podem ser usadas para verificar várias coisas, como:

  • Largura e altura da viewport
  • Largura e altura do dispositivo
  • Orientação (o telefone ou tablet está em modo paisagem ou retrato?)
  • Resolução

O uso de consultas de mídia é uma técnica popular para fornecer estilos personalizados para desktops, laptops, tablets e smartphones (design de sites responsivos).

Você ainda pode usar consultas de mídia para definir estilos que se aplicam apenas a documentos impressos ou leitores de tela (mediatype: print, screen ou speech).

Além do tipo de mídia, há características de mídia. As características de mídia fornecem mais detalhes específicos para consultas de mídia, permitindo testar características específicas do agente de usuário ou do dispositivo de exibição. Por exemplo, você pode aplicar estilos apenas a telas maiores ou menores que um determinado largura.

Veja também:

Tutorial CSS:Consulta de mídia CSS

Tutorial CSS:Exemplo de consulta de mídia CSS

Tutorial RWD:Implementação de design responsivo web através de consultas de mídia

Manual de referência JavaScript:Método window.matchMedia()

Exemplo

Exemplo 1

Se a largura da janela do navegador for 600px ou menor, mude a cor de fundo do elemento <body> para "azul claro":

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Experimente pessoalmente

Você pode encontrar mais exemplos TIY na parte inferior da página.

Sintaxe CSS

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Significado de not, only e and:

not: A palavra-chave not inverte o significado da consulta de mídia.

only: A palavra-chave only impede que navegadores de versões antigas apliquem estilos especificados, que não suportam consultas de mídia com características de mídia. Ela não tem impacto em navegadores modernos.

and: A palavra-chave and combina características de mídia com tipos de mídia ou outras características de mídia.

Elas são opcionais. No entanto, se usar not ou only, também deve especificar o tipo de mídia.

Você também pode usar diferentes folhas de estilo para diferentes mídias, assim:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
....

Tipo de mídia

Valor Descrição
all Padrão. Usado para todos os tipos de dispositivos de mídia.
print Usado em impressoras.
screen Usado em monitores de computador, tablets, smartphones e outros.
speech Usado por leitores de tela para ler páginas da web.

Características de mídia

Valor Descrição
any-hover

Existem quaisquer meios de entrada disponíveis que permitem que o usuário (como o mouse) fique suspenso sobre o elemento?

Adicionado no Nível 4 de Consultas de Mídia.
any-pointer

Existem quaisquer dispositivos de ponteiros entre os meios de entrada disponíveis, e se houver, qual é sua precisão?

Adicionado no Nível 4 de Consultas de Mídia.
aspect-ratio A proporção de largura e altura do viewport (área de visualização).
color

O número de bits por pixel do dispositivo de saída, comuns são 8, 16, 32 bits.

Se o dispositivo não suporta saída de cores, o valor é 0.
color-gamut

O domínio de cores suportado aproximadamente pelo agente de usuário e o dispositivo de saída.

Adicionado no Nível 4 de Consultas de Mídia.
color-index

O número de entradas na tabela de consulta de cores (color lookup table) do dispositivo de saída.

Se o dispositivo não usa a tabela de consulta de cores, o valor é 0.
device-aspect-ratio

A proporção de largura e altura do dispositivo de saída.

Foi descontinuado no nível 4 das Media Queries.
device-height

A altura da superfície de renderização do dispositivo de saída (por exemplo, a tela).

Foi descontinuado no nível 4 das Media Queries.
device-width

A largura da superfície de renderização do dispositivo de saída (por exemplo, a tela).

Foi descontinuado no nível 4 das Media Queries.
display-mode

O modo de exibição do aplicativo, conforme especificado pelo membro display do manifest do web app.

Definido no spec do Web App Manifest.
forced-colors

Se o agente de usuário limita o painel de cores.

Adicionado no Nível 5 de Consultas de Mídia.
grid Se o dispositivo de saída usa uma tela de grade ou uma tela de pontos?
height A altura do viewport (área de visualização).
hover

Se o mecanismo de entrada principal permite que o usuário coloque o mouse sobre o elemento?

Adicionado no Nível 4 de Consultas de Mídia.
inverted-colors

Se o navegador ou o sistema operacional de baixa camada inverteu as cores.

Adicionado no Nível 5 de Consultas de Mídia.
light-level

O nível atual da iluminação ambiente.

Adicionado no Nível 5 de Consultas de Mídia.
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 dígitos para cada componente de cor do dispositivo de saída.
max-color-index O número máximo de cores que o dispositivo pode exibir.
max-height A altura máxima da área de exibição, por exemplo, a janela do navegador.
max-monochrome O número máximo de dígitos para cada 'cor' em dispositivos monocromáticos (em tons de cinza).
max-resolution A resolução máxima do dispositivo, expressa em dpi ou dpcm.
max-width A largura máxima da área de exibição, por exemplo, a janela do navegador.
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 dígitos para cada componente de cor do dispositivo de saída.
max-color-index O número máximo de cores que o dispositivo pode exibir.
min-height A altura mínima da área de exibição, por exemplo, a janela do navegador.
min-monochrome O número mínimo de dígitos para cada 'cor' em dispositivos monocromáticos (em tons de cinza).
min-resolution Resolução mínima do dispositivo, usando dpi ou dpcm.
min-width Largura mínima da área de exibição, por exemplo, a janela do navegador.
monochrome

Profundidade de bits de cada pixel no buffer de frame monocromático do dispositivo de saída.

Se o dispositivo não for um monitor monocromático, o valor será 0.
orientation O sentido de rotação da janela (modo landscape ou portrait).
overflow-block

Como o dispositivo de saída processa o conteúdo que transborda na linha block?

Adicionado no Nível 4 de Consultas de Mídia.
overflow-inline

O conteúdo que transborda na linha inline pode ser rolado?

Adicionado no Nível 4 de Consultas de Mídia.
pointer

O mecanismo de entrada principal é um dispositivo de ponta? Se for, qual é sua precisão?

Adicionado no Nível 4 de Consultas de Mídia.
prefers-color-scheme

O usuário tende a preferir um esquema de cores claro ou escuro?

Adicionado no Nível 5 de Consultas de Mídia.
prefers-contrast

Detectar se o usuário solicitou ao sistema para aumentar ou diminuir a contraste entre cores próximas.

Adicionado no Nível 5 de Consultas de Mídia.
prefers-reduced-motion

O usuário deseja que haja menos efeitos dinâmicos na página?

Adicionado no Nível 5 de Consultas de Mídia.
prefers-reduced-transparency

O usuário tende a preferir uma transparência menor?

Adicionado no Nível 5 de Consultas de Mídia.
resolution Resolução do dispositivo de saída, usando dpi ou dpcm.
scan Processo de escaneamento do dispositivo de saída (aplicável a TVs, etc.).
scripting

Detectar se o scripting (por exemplo, JavaScript) está disponível.

Adicionado no Nível 5 de Consultas de Mídia.
update

Frequência com que o dispositivo atualiza o renderizado do conteúdo.

Adicionado no Nível 4 de Consultas de Mídia.
width Largura da janela (viewport).

Mais exemplos

Exemplo 2

Quando a largura do navegador for 600px ou menor, ocultar o elemento:

@media screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Experimente pessoalmente

Exemplo 3

Se a largura da janela de exibição for 800 pixels ou maior, use a consulta de mídia para definir a cor de fundo para lavanda; se a largura da janela de exibição estiver entre 400 e 799 pixels, use a consulta de mídia para definir a cor de fundo para verde claro. Se a largura da janela de exibição for menor que 400 pixels, a cor de fundo será azul claro:

body {
  background-color: lightblue;
}
@media screen and (min-width: 400px) {
  body {
    background-color: verde claro;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavanda;
  }
}

Experimente pessoalmente

Exemplo 4

Crie um menu de navegação responsivo (aparece horizontalmente em grandes telas e verticalmente em pequenas telas):

@media screen and (max-width: 600px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

Experimente pessoalmente

Exemplo 5

Use consultas de mídia para criar layouts de colunas responsivos:

/* No ecrã com largura de 992px ou menor, mude de quatro colunas para duas */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/* No ecrã com largura menor ou igual a 600 pixels, faça os colunas empilhadas em vez de alinhadas lado a lado */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Experimente pessoalmente

Exemplo 6

Use consultas de mídia para criar sites responsivos:

Experimente pessoalmente

Exemplo 7

As consultas de mídia também podem ser usadas para alterar o layout da página com base na orientação do navegador. Você pode escrever um conjunto de atributos CSS que apenas se aplicam quando a largura da janela do navegador é maior do que sua altura (ou seja, a orientação 'horizontal').

Se a orientação estiver no modo de tela horizontal, use o fundo de cor azul claro:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Experimente pessoalmente

Exemplo 8

Use consultas de mídia para definir a cor do texto para verde ao exibir o documento na tela e preto ao imprimir:

@media screen {
  body {
    color: green; 
  }
}
@media print {
  body {
    color: black; 
  }
}

Experimente pessoalmente

Exemplo 9

Lista separada por vírgula: use vírgula para adicionar outra consulta de mídia à consulta de mídia existente (seu comportamento é semelhante ao operador OR):

/* Quando a largura estiver entre 600px e 900px ou maior que 1100px - alterar o aspecto do <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

Experimente pessoalmente

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente as regras @media.

Chrome IE / Edge Firefox Safari Opera
21 9 3.5 4.0 9