Breakpoints são as larguras de viewport em que um layout responsivo muda de estrutura. Um conjunto comum e seguro é de cerca de 640 px para celulares grandes, 768 px para tablets, 1024 px para notebooks pequenos e 1280 px para desktop, escritos como queries min-width em rem. O melhor é tratar esse conjunto como ponto de partida e mover os breakpoints para onde o seu próprio conteúdo começa a ficar ruim, em vez de correr atrás de tamanhos de aparelhos.
Breakpoints comuns num relance
| Faixa | Breakpoint típico | O que fica aqui |
|---|---|---|
| Celulares pequenos | estilos base (sem query) | Celulares de 320–375 px de largura |
| Celulares grandes | 480–640 px | Celulares de 390–440 px na vertical, celulares na horizontal |
| Tablets | 768 px | iPad mini e tablets na vertical |
| Notebooks pequenos, tablets na horizontal | 1024 px | iPad na horizontal, notebooks de 13” com zoom |
| Desktop | 1280 px | A maioria das telas de notebook e desktop |
| Desktop largo | 1440–1536 px | Monitores grandes |
Escreva-os em rem (40rem, 48rem, 64rem, 80rem) para que acompanhem o usuário que aumenta o tamanho padrão da fonte.
Como os frameworks populares definem breakpoints
| Framework | Breakpoints (min-width) |
|---|---|
| Tailwind CSS v4 | 640, 768, 1024, 1280, 1536 px |
| Bootstrap 5 | 576, 768, 992, 1200, 1400 px |
| Classes de tamanho de janela do Material Design 3 | compact < 600, medium 600–839, expanded 840–1199, large 1200–1599, extra-large ≥ 1600 (dp) |
Em linhas gerais, eles concordam no formato: uma mudança para tablet por volta de 600–768, uma para desktop por volta de 1000–1200 e um ou dois tamanhos largos. Detalhes: breakpoints do Tailwind e breakpoints do Bootstrap.
Por que breakpoints baseados em aparelhos envelhecem mal
É tentador colocar breakpoints nas larguras exatas dos aparelhos: 375 para um iPhone, 390 para um mais novo, 414 para um modelo Plus. O problema é que os aparelhos mudam todo ano. Só os iPhones atuais vão de 375 a 440 pixels CSS de largura (veja a tabela de tamanho da tela do iPhone), os Android acrescentam muitas outras larguras, e dobráveis e janelas em tela dividida caem em qualquer ponto.
Um layout que só funciona em larguras específicas de aparelhos vai quebrar nas intermediárias. Os breakpoints devem marcar onde o layout precisa mudar, e entre eles o layout deve ser fluido.
Como escolher breakpoints a partir do conteúdo
- Monte primeiro o layout mais estreito, por volta de 320 px.
- Alargue a viewport devagar no modo Responsive do Chrome DevTools.
- Pare quando o design começar a ficar ruim: linhas longas demais, cards esticados, espaço para uma segunda coluna ou navegação que caberia numa linha.
- Coloque um breakpoint nessa largura, arredondado para um valor razoável em rem.
- Repita até o layout mais largo que você suporta.
Normalmente você termina com três a cinco breakpoints. Se tiver mais de seis, alguns provavelmente estão corrigindo problemas de componentes que uma container query ou uma técnica fluida resolveria melhor.
Menos breakpoints com técnicas fluidas
O CSS moderno dispensa muitos breakpoints:
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))acrescenta e remove colunas automaticamente.flex-wrap: wrapcom umflex-basisfaz os itens quebrarem de linha quando falta espaço.clamp()escala tamanhos de fonte e espaçamentos suavemente:font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem).width: min(100% - 2rem, 70rem)cria numa linha um contêiner com respiro lateral e largura máxima.
Guarde os breakpoints para mudanças estruturais: estilo da navegação, número de colunas da página, posição da sidebar.
Breakpoints e tablets
É nos tablets que as escolhas de breakpoint mais aparecem. Um iPad na vertical tem de 744 a 1032 px de largura, dependendo do modelo, então pode cair de qualquer lado de 768 ou 1024. Ao girar, ele cruza mais um breakpoint. Teste tablets nas duas orientações e lembre que o Safari no iPad costuma pedir a versão desktop. Mais em como ver um site como no iPad no Chrome.
Como testar seus breakpoints
- Ative Show media queries na barra de dispositivos do DevTools para ver cada breakpoint como uma barra; clique numa barra para ir até ela.
- Teste cada breakpoint na largura exata e 1 px abaixo.
- Confira celulares e tablets específicos, não só larguras. O Mobile View Extension, com presets de aparelhos, é o jeito mais rápido de percorrer páginas em vários tamanhos.
O método completo está em como testar a responsividade de um site.
Perguntas frequentes
Quais são os breakpoints padrão do design responsivo?
Não há um padrão oficial. Os valores comuns são 640, 768, 1024 e 1280 px (Tailwind) ou 576, 768, 992, 1200 e 1400 px (Bootstrap). Escolha um conjunto e use-o de forma consistente.
Qual breakpoint usar para celular?
No CSS mobile first, celulares não precisam de breakpoint: eles recebem os estilos base. O primeiro breakpoint, geralmente entre 480 e 640 px, marca onde o layout pode começar a usar mais espaço.
Quantos breakpoints um site deve ter?
De três a cinco é o comum. Use layouts fluidos entre eles e só acrescente um breakpoint onde o conteúdo precisar de uma mudança estrutural.