@media

A regra "at" @media de CSS permte 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

Consultas de média
Em JavaScript, CSSMediaRule está associado a esta regra-at.
Recursos de média em extensões da Mozilla
Recursos de média em extensões WebKit