Design responsivo com CSS
Flex responsivo e Grid responsivo mostraram truques de layout em breakpoints. Design responsivo é o quadro geral: um site legível no telemóvel, tablet e monitor largo — sem duas cópias HTML. Esta lição fixa hábitos; media queries, breakpoints e imagens responsivas aprofundam depois.
Caixa de ferramentas do design responsivo
📊 Design responsivo num relance
| Peça | Tarefa do dia a dia |
|---|---|
| Viewport meta | Diz ao mobile para usar a largura do dispositivo, não uma coluna desktop falsa |
| Contentor fluido | width: 100% + max-width + padding lateral — linhas legíveis |
Unidades relativas (rem, %, em) |
Tipografia e espaçamento que escalam com definições |
| Imagens flexíveis | max-width: 100% para media não transbordar em ecrãs estreitos |
| Uma árvore HTML | Mesmos marcos; o CSS leva as mudanças de layout |
| Media queries (próxima lição) | Alterar regras quando o viewport coincide |
Páginas de largura fixa que fazem zoom ou scroll horizontal no telemóvel frustram. O design responsivo aceita qualquer largura e ajusta espaço, colunas e tipo com calma — com Flex e Grid que já praticou.
Viewport meta — o mobile precisa da dica
Sem <meta name="viewport" content="width=device-width, initial-scale=1">, muitos telemóveis renderizam largura desktop e encolhem. Uma vez no <head>, depois CSS.
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
Mobile-first vs desktop-first
Mobile-first escreve estilos base para ecrãs estreitos e depois consultas min-width para ecrãs maiores. Desktop-first começa largo e usa max-width para apertar — como Flex/Grid responsivo. Ambos funcionam se mudar uma camada de cada vez; escolha um hábito por projeto.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
font-size: 1rem;
padding: 1rem;
}
/* A lição Media Queries acrescenta regras min-width aqui */
Contentor fluido centrado
Largura total com teto max-width e padding horizontal. Este padrão funciona antes de Flex ou Grid para colunas.
.page-wrap {
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Unidades relativas para tipo e espaço
rem liga ao tamanho raiz — bom para títulos e gaps. % encaixa larguras no pai. Evite fixar tudo em px quando uma escala relativa mantém a página estável no zoom.
:root {
font-size: 100%;
}
h1 {
font-size: 1.75rem;
margin: 0 0 0.75rem;
}
.lead {
font-size: 1.125rem;
max-width: 40rem;
}
Imagens e media flexíveis
Bitmaps mais largos que o viewport causam scroll horizontal. Regra simples: display: block, max-width: 100%, height: auto.
img,
video {
display: block;
max-width: 100%;
height: auto;
}
Hábito responsivo calmo
Uma árvore HTML. Viewport meta no sítio. Contentor fluido e unidades relativas primeiro. Flex/Grid responsivo quando colunas devem refluir — não um segundo site «só mobile». Anote o plano de breakpoints; Media Queries nomeia a sintaxe.
Experimente
- Confirme viewport meta numa página de exemplo.
- Envolva conteúdo em contentor fluido com
max-widthe padding. - Texto em
reme teste zoom do browser. - Regra de imagem flexível numa galeria.
- Um layout que ainda precise de media query — guarde para a próxima lição.
Erros comuns
- Larguras px fixas em cada wrapper
- Site m.example.com separado em vez de CSS responsivo numa árvore
- Esquecer viewport meta e estranhar «zoom out» no mobile
- Imagens enormes sem
max-width: 100% - Achar que esta intro substitui media queries, breakpoints e imagens responsivas
Resumo
- Design responsivo adapta um HTML a vários viewports
- Viewport meta + contentor fluido + unidades relativas = base
- Mobile-first e desktop-first são pontos de partida; media queries aplicam mudanças
- Flex/Grid responsivo são ferramentas nesta mentalidade
- Seguinte: Media Queries
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo