Consultas de mídia e desenvolvimento mobile-first

As consultas de mídia aplicam regras CSS somente quando determinadas condições são verdadeiras — por exemplo, quando a largura da área de visualização está acima de um limite. Elas são a base do design responsivo, permitindo que uma única folha de estilos se adapte a qualquer tamanho de tela.

Uma consulta de mídia envolve um bloco de CSS em uma regra @media. As regras internas só são aplicadas quando a condição corresponde.

min-width: aplica estilos quando a área de visualização tem pelo menos esta largura (priorizando dispositivos móveis). max-width: aplica estilos quando a área de visualização tem no máximo esta largura (priorizando computadores). Prefira min-width para o desenvolvimento que prioriza dispositivos móveis.

Escreva o CSS primeiro para telas pequenas (fora de qualquer consulta de mídia). Em seguida, use consultas de mídia com min-width para adicionar progressivamente complexidade a telas maiores. Isso produz um CSS menor para usuários móveis e um código mais limpo no geral.

Escolha os pontos de quebra com base no seu conteúdo, não em dispositivos específicos. Pontos de partida comuns: 480px (celulares grandes), 768px (tablets), 1024px (computadores pequenos), 1280px (computadores grandes). Evite pontos de quebra direcionados a modelos específicos de dispositivos.

Além da largura da tela, você pode direcionar tipos de mídia: screen para telas e print para impressoras. As consultas de mídia para impressão permitem personalizar a aparência de uma página quando ela é impressa (ocultar a navegação e ajustar as cores).

Encadeie condições com and: aplique estilos somente quando ambas forem verdadeiras. Use not e or para uma lógica mais complexa.

Responda à preferência do usuário pelo modo escuro do OS. Por padrão, ofereça um tema escuro sem exigir um botão de alternância.

Respeite os usuários que preferem menos movimento (por causa de distúrbios vestibulares ou epilepsia). Desative ou simplifique as animações dentro desta consulta de mídia.

As consultas de contêiner (@container) aplicam estilos com base no tamanho de um contêiner pai, e não na janela de visualização. Elas permitem uma responsividade realmente no nível do componente e estão disponíveis em todos os navegadores modernos desde 2023.

Use propriedades lógicas como margin-inline-start em vez de margin-left para criar layouts que funcionem tanto em idiomas escritos da esquerda para a direita quanto da direita para a esquerda. Prepare seus layouts responsivos para o futuro.

@media (min-width: N) para aprimoramento progressivo com prioridade para dispositivos móveis. Escreva estilos básicos para dispositivos móveis sem consultas. Adicione complexidade para telas maiores. Use prefers-color-scheme para o modo escuro. Use prefers-reduced-motion para acessibilidade. Use consultas de contêiner para responsividade no nível do componente.