O que é Breakpoint?
Breakpoint, também chamado de ponto de quebra, é a medida de largura em que o layout muda de comportamento. Abaixo daquela largura, o site organiza o conteúdo de um jeito; acima dela, de outro.
Os breakpoints são a base do design responsivo. Em vez de manter um site para celular e outro para desktop, o desenvolvedor escreve um só código e define pontos em que o arranjo se reorganiza: três colunas viram uma, o menu horizontal vira botão, a fonte cresce. A escolha desses pontos parte do conteúdo: você aumenta a janela do navegador aos poucos e observa onde o layout começa a incomodar.
Como funciona na prática?
No CSS, o breakpoint aparece dentro de uma media query, uma regra que só se aplica quando a tela atende a uma condição de largura. O trecho abaixo mantém uma coluna por padrão e passa a duas colunas a partir de 768 pixels:
.grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
.grid { grid-template-columns: 1fr 1fr; }
}O fluxo tem quatro passos. Primeiro, você escreve o estilo base pensando na menor tela, abordagem chamada mobile-first. Segundo, aumenta a largura até o layout quebrar. Terceiro, cria um breakpoint naquele ponto. Quarto, repete até a maior tela prevista. Frameworks de CSS já trazem conjuntos prontos, perto de 640, 768, 1024 e 1280 pixels, que servem de ponto de partida.
Breakpoint vs viewport: qual a diferença?
| Aspecto | Breakpoint | Viewport |
|---|---|---|
| O que é | Regra definida por você no CSS | Área visível da página no aparelho |
| Quem determina | O desenvolvedor | O navegador e o tamanho da tela |
| Função | Disparar mudança de layout | Servir de referência de medida |
| Onde aparece | Em media queries | Nas unidades vw e vh |
Veredito: o viewport é a medida disponível; o breakpoint é a decisão de layout que você toma com base nessa medida.
Exemplos de uso
- Um e-commerce mostra quatro produtos por linha no desktop, dois no tablet e um no celular. Cada mudança acontece em um breakpoint definido no CSS.
- Um site institucional limita a largura do texto a 700 pixels em telas grandes. Sem esse limite, a linha ficaria longa demais e cansaria a leitura.
Erros comuns
- Escolher breakpoints com base em modelos específicos de celular, que mudam a cada ano, em vez de olhar o próprio conteúdo.
- Criar breakpoints demais e transformar a manutenção do CSS em quebra-cabeça.
- Esquecer as larguras intermediárias, deixando o layout estranho entre um ponto e outro.
- Testar só encolhendo a janela do navegador e nunca abrir o site em um celular real.
Perguntas frequentes sobre Breakpoint
Quantos breakpoints um site deve ter?
A maioria dos projetos funciona bem com dois a quatro pontos de quebra, cobrindo celular, tablet e desktop. O número certo depende do layout: quanto mais complexa a grade, mais ajustes ela pede. Vale criar um breakpoint quando o layout realmente incomoda naquela largura.
O que é mobile-first?
Mobile-first é a prática de escrever o estilo base para a menor tela e adicionar regras conforme a largura aumenta, com media queries de min-width. A abordagem tende a produzir CSS mais simples e garante que o celular, responsável pela maior parte do tráfego em muitos sites brasileiros, receba a versão mais enxuta.
Breakpoint influencia a velocidade do site?
De forma indireta. O breakpoint muda o arranjo visual, não o peso dos arquivos. O ganho de velocidade vem de decisões próximas, como servir imagens em tamanhos diferentes por tela e evitar carregar no celular blocos que só aparecem no desktop.