@media

A regra "at" @media de CSS permite aplicar parte de uma folha de estilos com a condição definida por uma ou mais consultas de média.

Pode utilizar-se tanto no início do código como dentro de qualquer outra regra "at" condicional.

Nota: Em JavaScript, a funcionalidade desta regra está disponível através da interface CSSMediaRule do modelo/objeto CSS.

Sintaxe

/* No nível mais abrangente do código */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Dentro de outra regra-"at" condicional */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Para aprofundar a sintaxe de consultas de média, por favor leia Utilizar consultas de média.

Tipos de média

all (todos)
Destinado para todos os dispositivos.
print (impressão)
Destinado para material paginado e para documentos visualizados no ecrã no modo de pré-visualizar impressão. Por favor, consulte a secção de média paginada, e a secção de média do tutorial de Como Começar para informação sobre a formatação de problemas que são específicos para a média paginada.
screen (ecrã)
Destinado primariamente para os ecrãs de computador a cores.
speech (elocução)

Pretendido para sintetizadores de fala. Nota: CSS2 tem um tipo de mídia similar chamado 'aural' para esta proposta. Veja o apêndice em folhas de estilo aural para detalhes.

Grupos de Média

Nota: Esta secção aplica-se a CSS 2.1. Há vários tipos de média, introduzidos nas especificações do CSS2.1 e Media Queries 3, que foram descontinuados, como tty, tv, projection, handheld, braille, embossed, and aural. O tipo aural foi substituído pelo speech, que é semelhante.

Tipos de média são também parte de diferentes grupos de média. A seguinte tabela indica que tipos estão em cada grupo.

Grupos
Tipos continuous paged visual audio speech tactile grid bitmap interactive static
braille X X X X X
embossed X X X X
handheld X X X X X X X X X
print X X X X
projection X X X X
screen X X X X X X
aural X X X X
tty X X X X X
tv X X X X X X X

Exemplos

  @media print {
    body { font-size: 10pt }
  }
  @media screen {
    body { font-size: 13px }
  }
  @media screen, print {
    body { line-height: 1.2 }
  }

Questões de acessibilidade

Para comodidade das pessoas que ampliam o tamanho do texto, deve-se utilizar medidas em em na definição de <length>. Esta medida funciona melhor do que px quando o utilizar muda o tamanho do texto no navegador.

Considere usar consulta de média Level 4 (Nível 4) para melhorar experiência de utilização. Por exemplo, prefers-reduced-motion para detetar se o utilizador pediu ao sistema para minimizar a quantidade de animaçõe ou movimentos.

Especificações

Especificação Estado Comentário
Media Queries Level 5
The definition of '@media' in that specification.		 Editor's Draft Reinstituída consultas de média light-level, inverted-colors e consultas média personalizadas, as quais foram removidas do Level 4 (Nível 4).
Adicionados recursos de média prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, e prefers-color-scheme.
CSS Conditional Rules Module Level 3
The definition of '@media' in that specification.		 Candidate Recommendation Definida sintaxe básica da regra @media.
Media Queries Level 4
The definition of '@media' in that specification.		 Candidate Recommendation

Adicionados recursos média scripting, pointer, hover, update, overflow-block, e overflow-inline.
Descontinuação de todos os tipos de média excepto screen, print, speech, e all.
Tornou a sintaxe mais flexível com adição, entre outras coisas, da palavra-chave or.
Media Queries
The definition of '@media' in that specification.		 Recommendation Sem alterações.
CSS Level 2 (Revision 1)
The definition of '@media' in that specification.		 Recommendation Definição inicial.

== Compatibilidade com navegadores ==

Consulte também