Sintaxe e Pontos de Interrupção Comuns

Uma consulta de mídia envolve regras CSS e as aplica somente quando uma condição é verdadeira. A sintaxe básica:

Os tipos de mídia mais comuns:

• all — aplica-se a todos os dispositivos de saída (padrão)
• screen — telas de computadores e telefones
• print — para visualização e impressão
• speech — leitores de tela

Os recursos de mídia descrevem características do dispositivo ou da janela de visualização. Recursos comuns: width, height, orientation, resolution, prefers-color-scheme, hover.

O recurso mais usado — direciona-se a telas com largura igual ou superior a um determinado limite. Abordagem mobile-first.

Não existem pontos de interrupção universalmente corretos. Um conjunto popular, baseado em larguras comuns de dispositivos:

• 480px — telefones grandes
• 768px — tablets
• 1024px — computadores pequenos e tablets na horizontal
• 1280px — computadores padrão
• 1536px — computadores grandes

Em vez de usar pontos de interrupção baseados em dispositivos, a prática moderna define pontos onde o conteúdo deixa de se ajustar. Crie o design em um tamanho, redimensione-o e adicione um ponto de interrupção quando o layout começar a ficar ruim.

O CSS moderno aceita sintaxe de intervalo dentro de consultas de mídia — mais legível do que combinar min e max:

Use and para exigir várias condições simultaneamente:

Use not para negar uma consulta de mídia. Ela se aplica a tudo que NÃO corresponde à consulta:

Separe várias consultas com vírgulas — assim como uma lista de seletores. Os estilos são aplicados se QUALQUER consulta corresponder.

Usar unidades em para pontos de interrupção (em vez de px) faz com que eles acompanhem a preferência de tamanho da fonte do navegador do usuário, melhorando a acessibilidade.

Qual consulta de mídia corresponde a telas com pelo menos 1024px de largura?

Consultas de mídia aplicam CSS condicionalmente com base nas características do dispositivo ou da janela de visualização. Use min-width para uma abordagem mobile-first e max-width para uma abordagem desktop-first. Defina os pontos de interrupção onde o conteúdo precisar, não em tamanhos arbitrários de dispositivos. A sintaxe moderna de intervalos melhora a legibilidade.