Breakpoints CSS
Media queries mostraram como @media dispara. Imagens responsivas mostraram como as imagens encaixam nos slots que essas queries criam. Breakpoints são o plano: uma lista curta de larguras onde a estratégia de layout muda — colunas, navegação, espaçamento — nomeada uma vez e reutilizada para o site inteiro avançar em passo.
Kit de breakpoints
📊 Breakpoints num relance
| Peça | Trabalho do dia a dia |
|---|---|
| Breakpoint | Largura planeadas onde as regras de layout mudam |
| Escolha guiada pelo conteúdo | Larguras onde o design fica apertado ou vazio — não SKUs de telemóveis |
Degraus nomeados (sm, md, lg…) |
O mesmo token em todo o lado; auditorias e equipa mais simples |
| Escada mobile-first | Base = estreito; passos min-width acrescentam melhorias |
| Fluido entre degraus | %, rem, Flex/Grid antes de outra query |
| Conjunto documentado | Lista curta em comentários ou tokens — não vinte valores soltos |
Um breakpoint não é «o iPhone». É «quando esta barra lateral já não cabe ao lado do artigo» ou «quando a nav pode ficar em linha». Meça o conteúdo e escreva um passo partilhado.
Conteúdo primeiro — não um catálogo de dispositivos
Redimensione o browser até algo partir: linhas demasiado longas, cartões esmagados, hamburger quando já há espaço. Anote essa largura em rem (ou em). Esse candidato vale mais do que copiar uma tabela de marketing de pixels de telemóveis.
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}
Listas pixel a pixel por dispositivo envelhecem mal — surgem telemóveis novos todos os anos. Poucos degraus guiados pelo conteúdo duram mais e mantêm a folha de estilos legível.
Nomear os degraus — reutilizar as mesmas larguras
Dois a quatro degraus bastam num site típico. Dê nomes curtos em comentários (ou custom properties com os valores de largura). Cada componente que «inicia o layout largo» deve usar o mesmo número — não 720px no cabeçalho e 768px na grelha.
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}
/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
Em CSS clássico, @media nem sempre lê custom properties como condição da query como gostaríamos — trate tokens :root como documentação e apoio a JS/ferramentas, e mantenha os literais correspondentes alinhados. O hábito que importa: uma escada partilhada, não larguras aleatórias por ficheiro.
Escada mobile-first
Escreva defaults estreitos sem queries. Cada passo min-width acrescenta colunas, tipo maior ou nav horizontal. Não reescreva a página inteira em cada passo — mude uma camada clara.
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
Apertar desktop-first (quando se parte do largo)
Se o projeto já entrega layout largo, queries max-width podem colapsar colunas em viewports menores. Seja consistente: não misture min-width e max-width ao acaso no mesmo componente sem motivo.
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}
@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}
Prefira uma direção por projeto. Media Queries já cobriu a sintaxe min-width vs max-width — aqui a regra é estratégia: degraus partilhados, mesma filosofia em todo o lado.
Um passo, vários componentes
Quando --bp-lg (ou 64rem) dispara, atualize nav, grelha e espaçamento juntos se pertencem ao mesmo capítulo de layout. Larguras «quase iguais» espalhadas criam bugs: o cabeçalho muda antes da grelha principal.
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}
Fluido primeiro — queries depois
Entre breakpoints, Flex, Grid, % e rem já devem absorver pequenas mudanças de largura. Só acrescente query quando for necessária uma mudança estrutural (número de colunas, outro padrão de nav). Mais queries não é mais profissional.
Experimente
- Redimensione uma página de prática e liste duas larguras onde o layout precisa mesmo de mudar.
- Converta essas larguras para
reme nomeie-as (md,lg). - Aplique os mesmos dois valores
min-widthà grelha de cartões e à nav. - Procure no CSS outros números
min-width/max-width— funda quase-duplicados. - Remova uma query desnecessária melhorando a base fluida (gap,
minmax, wrap).
Erros comuns
- Catálogo de cada largura de telemóvel em vez de pontos de stress do conteúdo
- Doze queries sobrepostas com pixels ligeiramente diferentes
- Cabeçalho parte aos
768px, main aos800px, rodapé aos720px - Saltar CSS fluido e resolver cada ajuste com outro
@media - Reensinar chavetas
@mediaousrcsetaqui em vez de planear a escada
Resumo
- Breakpoints são degraus de layout planeados — nomeie um conjunto curto e reutilize
- Escolha larguras pelo stress do conteúdo, não por tabelas de marketing de dispositivos
- Prefira escada
min-widthmobile-first; uma direção por projeto - Mantenha-se fluido entre degraus; query só para mudanças estruturais
- Isto fecha o módulo Responsive — a seguir: Box Shadow em Effects & Motion
🧠 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