Design responsivo com media queries

Sem uma certa meta tag, muitos celulares montam a página como se a tela fosse bem mais larga (o MDN dá 980 pixels como exemplo) e depois a encolhem, e aí uma media query para celulares nunca é ativada.

Uma página, todas as telas

Design responsivo é construir uma única página que se adapta a qualquer tela em que ela aparecer, de um celular estreito a um monitor largo, em vez de fazer um site móvel separado. Ele se apoia em três ideias: um layout feito de larguras flexíveis em vez de fixas, mídias que se ajustam dentro dos contêineres e media queries que mudam o layout nos pontos em que ele deixa de funcionar. O flexbox e o grid já fazem boa parte do trabalho, como as duas últimas unidades mostraram com os cartões que quebram de linha e as colunas auto-fill.

A meta tag viewport

Muitos celulares desenham as páginas numa viewport virtual mais larga que a tela, o MDN dá 980 pixels como exemplo, e depois encolhem o resultado, porque os sites antigos eram feitos para computadores. Para uma página pensada para se adaptar, isso atrapalha: uma media query que deveria ser ativada abaixo de 600 pixels nunca é, porque o navegador acha que a tela tem 980 pixels de largura. <meta name="viewport" content="width=device-width"> no head diz ao navegador para usar a largura real do aparelho, medida em pixels CSS. Nunca acrescente user-scalable=no nem um maximum-scale baixo; o MDN avisa que bloquear o zoom exclui pessoas com baixa visão, e a WCAG 1.4.4 espera que o texto possa ser ampliado até 200 por cento.

Larguras fluidas e imagens

Larguras fixas são a causa mais comum de rolagem lateral no celular. Prefira max-width a width: max-width: 70rem num invólucro da página deixa que ele preencha uma tela pequena e pare de crescer numa grande. As imagens mantêm o tamanho natural em pixels por padrão, então uma foto de 1200 pixels transborda de uma tela de 390 pixels. img { max-width: 100%; height: auto; } deixa as imagens encolherem para caber no contêiner mantendo as proporções. A WCAG 1.4.10, Reflow (refluxo), pede que o conteúdo funcione numa largura de 320 pixels CSS sem rolagem em duas direções; conferir a página numa janela de 320 pixels de largura é um bom hábito.

Media queries

Uma media query envolve regras que só valem quando uma condição é verdadeira. @media (min-width: 600px) { ... } aplica as suas regras quando a viewport tem pelo menos 600 pixels de largura. A abordagem comum é mobile first: escreva os estilos de base para uma tela estreita, que costumam ser os mais simples (uma coluna, tudo empilhado), e depois acrescente queries min-width que reorganizam as coisas conforme o espaço aumenta. Escolha os breakpoints onde o seu conteúdo começa a ficar errado, não chutando tamanhos populares de aparelhos, já que surgem tamanhos de tela novos todo ano. Escrever os breakpoints em em, como 40em, também faz com que eles respondam quando o leitor aumenta o texto.

/* Base: one column for narrow screens */
.cols { display: grid; gap: 16px; }

/* From 600px: two columns */
@media (min-width: 600px) {
  .cols { grid-template-columns: 1fr 1fr; }
}

/* From 960px: a sidebar layout */
@media (min-width: 960px) {
  .cols { grid-template-columns: 240px 1fr 1fr; }
}

Outras coisas que uma query pode perguntar

Media queries podem testar mais do que a largura. Os recursos de preferência do leitor vêm do Media Queries Level 5: (prefers-color-scheme: dark) corresponde quando o leitor escolheu um tema escuro no sistema operacional, então você pode oferecer cores escuras automaticamente. (prefers-reduced-motion: reduce) corresponde quando o leitor pediu menos movimento, muitas vezes porque animações lhe dão tontura; desligue ali dentro movimentos grandes e efeitos de parallax. (hover: hover), do Level 4, diz se o ponteiro principal consegue passar por cima sem clicar, o que uma tela de toque não consegue. print estiliza a página para o papel, por exemplo escondendo o menu. Por fim, clamp() dimensiona as coisas de forma suave sem query: font-size: clamp(1.5rem, 4vw, 2.5rem) cresce com a tela, mas nunca fica abaixo de 1.5rem nem acima de 2.5rem.