--- title: '@media' slug: Web/CSS/@media tags: - CSS - Referencia - Referencia_CSS translation_of: Web/CSS/@media ---

{{ CSSRef() }}

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 {{domxref("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 {{cssxref("<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
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}} {{Spec2('CSS5 Media Queries')}} 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.
{{SpecName('CSS3 Conditional', '#at-media', '@media')}} {{Spec2('CSS3 Conditional')}} Definida sintaxe básica da regra @media.
{{SpecName('CSS4 Media Queries', '#media', '@media')}} {{Spec2('CSS4 Media Queries')}}

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.
{{SpecName('CSS3 Media Queries', '#media0', '@media')}} {{Spec2('CSS3 Media Queries')}} Sem alterações.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}} {{Spec2('CSS2.1')}} Definição inicial.

== Compatibilidade com navegadores ==

Consulte também

{{ languages( { "en": "en/CSS/@media", "fr": "fr/CSS/@media", "pl": "pl/CSS/@media" } ) }}