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 | |
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 |
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