Um site, muitíssimas telas
Imagine escrever um único site e ele ficar perfeito em um celular de 360 px, em um tablet, em um notebook e em um monitor de 27 polegadas. Essa é a promessa do responsivo, e ela é enorme: hoje metade do tráfego web é mobile. Se a sua página não funciona no bolso das pessoas, você perdeu metade dos visitantes antes mesmo de começar.
O contrário salta aos olhos na hora. Um design com larguras fixas em pixels que fica perfeito no seu notebook quebra no celular: aparece scroll horizontal, o texto transborda pelas laterais, os botões ficam minúsculos.
O design responsivo (responsive design) consiste em construir um único documento que se adapta a qualquer viewport, em vez de manter versões separadas para celular e desktop. Um site, todas as telas.
A tag viewport (imprescindível)
Sem ela, o celular finge ser uma tela larga (~980 px) e reduz tudo em
escala, deixando ilegível. Vai sempre no <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width: a largura do viewport = a largura real do dispositivo.initial-scale=1: sem zoom inicial.
Esta linha é o interruptor que ativa a responsividade. É o primeiro passo de qualquer projeto sério.
⚠️ PEGADINHA CLÁSSICA: esquecer a meta viewport. Seu CSS responsivo pode estar impecável, mas sem esta linha o celular o ignora e mostra a versão "de desktop" encolhida. Se no telefone tudo aparece minúsculo, olhe o
<head>antes de qualquer coisa.
Mobile-first: projete primeiro para celular
A estratégia profissional é mobile-first: você escreve os estilos base pensando na tela menor e depois adiciona complexidade para telas grandes por meio de media queries.
/* Base: celular. Uma única coluna, ocupa toda a largura. */
.galeria {
display: flex;
flex-direction: column;
gap: 12px;
}
Por que começar pelo pequeno? Pense em arrumar a mala: primeiro você coloca o essencial e, se trocar por uma mala maior, adiciona coisas. Muito mais fácil do que começar com a mala enorme e ter que ir tirando.
- O celular é a restrição mais dura: se cabe ali, escala bem para cima.
- Os estilos base são os mais simples; você vai somando melhorias, não desfazendo truques feitos para desktop.
- A maior parte do tráfego web hoje é mobile: ele merece a prioridade.
⚠️ PEGADINHA CLÁSSICA: projetar desktop-first (primeiro o monitor grande) e "depois eu adapto para o celular". Quase sempre você acaba brigando com o seu próprio CSS para desfazer o que fez. Comece pequeno e cresça: você vai sofrer bem menos.