Por que design responsivo existe

Uma página, telas muito diferentes

Um visitante pode abrir sua página num celular na mão, num laptop na mesa ou num monitor duas vezes mais largo. Todo curso de CSS até aqui supôs uma quantidade razoável de espaço: fileiras de flexbox, badges posicionados, cards centralizados. Nenhum fez a pergunta para a qual o design responsivo existe. O que deve acontecer quando o espaço é bem menor, ou maior, do que o esperado?

A resposta antiga: dois sites separados

Anos atrás, a resposta de costume era um site mobile separado, muitas vezes num subdomínio próprio como m.example.com, com HTML e CSS próprios e às vezes um código próprio. Dois sites queriam dizer trabalho dobrado a cada mudança e risco constante de as versões se desencontrarem. Os celulares ganhavam um layout que cabia, a um custo contínuo.

A resposta moderna: uma página que se adapta

O design responsivo troca isso por um documento HTML e uma folha de estilo que se adaptam à tela em que são renderizados. As regras CSS se aplicam conforme condições que o navegador informa na hora. Este curso trata desse mecanismo: media queries, a lógica condicional do próprio CSS.

A peça fundamental que quase todo mundo esquece primeiro

Antes de qualquer media query funcionar, uma tag precisa estar no <head> de toda página responsiva. Sem ela, tudo o que vem depois quebra em silêncio:

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

Sem essa tag, navegadores mobile não usam a largura real do celular. Para páginas feitas só para desktop não quebrarem nos primeiros smartphones, eles renderizam numa viewport virtual mais larga, muitas vezes de uns 980px, e reduzem o zoom do resultado para caber. O seu CSS nunca vê a largura estreita, então media queries escritas para larguras de celular nunca disparam. width=device-width diz ao navegador para usar a largura real do aparelho, e initial-scale=1 começa com zoom de 100%. Todo o resto deste curso depende dessa linha.

Adaptando o layout

"Responsivo" quer dizer mais que "fica menor". Um celular precisa de decisões diferentes, não de versões reduzidas das do desktop. Um layout de três colunas que funciona em 1200px fica ilegível em 375px. Uma navbar com seis links precisa virar outra coisa numa tela estreita. Uma barra lateral ao lado de um artigo pode precisar ir para baixo dele. Um bom design responsivo repensa o layout em cada tamanho, usando flexbox e posicionamento de forma condicional.

O que este curso cobre

• Aula 1, Por que design responsivo existe: a tag meta de viewport, e adaptar layout em vez de só encolher ele (você está aqui)
• Aula 2, Sintaxe de @media e min-width/max-width: escrevendo regras CSS condicionais
• Aula 3, Mobile-first vs desktop-first: duas filosofias para estruturar breakpoints
• Aula 4, Escolhendo breakpoints: escolhendo valores com base no seu conteúdo, não dispositivos específicos
• Aula 5, Flexbox e posicionamento responsivos: combinando media queries com as ferramentas de layout dos últimos dois cursos
• Aula 6, Além da largura: orientação, modo escuro e preferências de movimento reduzido
• Aula 7, Juntando tudo: uma navbar e uma grade de cards responsivas, mobile-first desde a base

No final, você vai conseguir adaptar qualquer layout dos últimos cursos a qualquer tela que aparecer.