Adapte a página com CSS responsivo e media queries

Design responsivo é a abordagem de fazer conteúdo e layout se adaptarem a diferentes espaços e preferências. O objetivo não é fabricar uma página para cada aparelho. É criar regras flexíveis e introduzir mudanças de arranjo quando o próprio conteúdo mostra que precisa delas.

Pense numa estante modular. Em uma parede estreita, os módulos ficam empilhados; em uma parede larga, podem ficar lado a lado. As peças continuam sendo as mesmas, mas a disposição acompanha o espaço. No CSS, dimensões fluidas, grid ou flex e media queries cumprem esse papel. O limite da analogia é importante: uma viewport pode mudar de tamanho, zoom e orientação enquanto a página está aberta, então o navegador recalcula o layout continuamente.

Comece com uma base que pode encolher

Antes de criar breakpoints, retire larguras rígidas desnecessárias:

* {
  box-sizing: border-box;
}

.conteudo {
  width: min(100% - 2rem, 64rem);
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

min() escolhe o menor entre o espaço disponível menos as margens e o limite de 64rem. Assim, o conteúdo não encosta nas laterais de uma tela estreita nem se estica indefinidamente em uma tela grande. Imagens podem encolher sem perder a proporção.

No HTML, a meta viewport também precisa existir:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ela orienta o navegador móvel a usar a largura do dispositivo como viewport do layout. Não é uma regra CSS e não conserta sozinha dimensões rígidas.

Use mobile first para acrescentar espaço

Mobile first significa escrever primeiro os estilos adequados ao espaço estreito e ampliar o arranjo com min-width:

.grade {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .grade {
    grid-template-columns: repeat(2, 1fr);
  }
}

A media query avalia uma condição do ambiente. Quando a viewport chega a 40rem, a grade passa de uma para duas colunas. Os elementos não são recriados; o algoritmo de layout recebe uma nova definição de colunas.

Deixe o conteúdo revelar o breakpoint

Um breakpoint é o ponto em que uma condição de media query muda. Não escolha um número só porque corresponde ao nome de um aparelho. Redimensione a página e observe quando títulos quebram mal, botões ficam apertados ou colunas deixam de comportar o conteúdo. Esse é um sinal mais durável.

Responsividade também envolve zoom e reflow. Teste com 200% de zoom: o usuário deve conseguir ler e operar a página sem rolagem horizontal para conteúdo que naturalmente poderia reorganizar. Não esconda informação essencial apenas para fazer o layout caber.

Conteúdo textual longo é um teste valioso. Troque um título curto por outro com duas linhas e aumente o texto padrão do navegador. Se os elementos se sobrepuserem, existe uma restrição rígida a revisar; não é o texto que está “quebrando” o layout.

No laboratório, acompanhe a largura registrada e arraste a borda da área de visualização. Abaixo de 640px, os cards formam uma coluna; acima, três. Sua microprática é mudar o breakpoint para 720px, prever em qual largura a troca ocorrerá e conferir. Depois aumente um dos títulos: se o card ficar apertado, ajuste o ponto pelo conteúdo, não pelo modelo do celular.

Na aula final, você vai reunir cascata, tipografia, caixas e responsividade em um componente completo de landing page.