Definição técnica em uma frase: breakpoints são verificações de largura de tela no CSS que aplicam regras de layout, permitindo que o conteúdo se ajuste fluidamente: em vez de comprimir o design de desktop num celular. O contexto que dimensiona o assunto: o mobile responde por mais de 62% do tráfego global da internet (dados Statista, 2º trimestre de 2025): e o Google indexa o site pela versão mobile. Layout quebrado no celular não é defeito estético: é defeito de ranking.
Os 4 tipos de breakpoint (a maioria só conhece o 1º)
Breakpoints de layout afetam a página inteira: o grid de 3 colunas em 1200px colapsa para 2 em 768px; a sidebar some abaixo disso e pode virar menu hambúrguer. Breakpoints de componente miram um elemento: a navbar ganha hambúrguer abaixo de 640px; um card mantém 400px quando cabe e escala quando não. Breakpoints de orientação disparam na rotação do dispositivo: o hero a 60% da altura da viewport em retrato; a receita que troca os ingredientes de coluna em paisagem. Breakpoints de conteúdo e dispositivo: os mais maduros: nascem do teste: o layout quebra em 642px, 860px ou 911px, valores estranhos que nenhum manual lista, porque dependem do seu conteúdo, não do catálogo de aparelhos.
A tabela de referência (XS a XL)
XS: 320/360px (celulares em retrato): uma coluna, gutters justos, alvos de toque generosos, imagens a 100% de largura máxima. S: 480/640px (celulares em paisagem, tablets pequenos): 2 cards em vez de 3, padding reduzido, campos de formulário full-width, rótulos de botão encurtados. M: 768/1024px (tablets): em 768px, navegação mobile e layouts de 2 colunas; em 1024px, a navbar completa volta. L: 1200/1440px (desktop): container alargado para ~1200–1440px, tipografia maior, grids de 3 colunas: e a regra tipográfica: 65 a 75 caracteres por linha para leitura confortável. XL: 1920px (ultrawide): container limitado por max-width, hero maior e elementos de fundo que ancoram o olhar: expandir a linha de texto para 1400px de largura é o erro clássico de ultrawide.
Um exemplo real de escala
No template Genius do Framer, a progressão ilustra o método: em 1440px, hero full-width, título em destaque e navegação no topo; por volta de 1300px, os itens do menu migram para um menu agregado e o hero encolhe; perto de 1100px, o título reduz de novo; em 768px, o menu vira hambúrguer e o hero empilha acima do texto. Nenhum desses valores é “padrão”: cada um é onde aquele conteúdo pediu mudança.
As práticas que sustentam o sistema
Mobile-first: projete primeiro na menor tela (320px: inclusive aparelhos Android antigos e de entrada, que ainda navegam) e cresça: adicionar espaço é fácil; comprimir conteúdo, impossível. Tipografia fluida: use em/rem em vez de pixels fixos: o texto escala com a base de 320px a 1920px sem ajuste manual por faixa. Flexbox e Grid com papéis distintos: Flexbox para linhas e colunas que se espalham ou empilham; Grid para o esqueleto bidimensional (galerias, estruturas): o padrão maduro é Grid para a estrutura da página, Flexbox para o conteúdo interno dos elementos. Teste onde quebra, não no catálogo: as pré-visualizações (iPhone SE 375px, iPad 768px, laptop 1200px, widescreen 1920px) são pontos de partida; os valores reais do seu layout podem ser 642px e 911px.
O DevTools e os previews de ferramentas como o Framer simulam dimensões com precisão: mas não simulam densidade de pixels, desempenho real de hardware nem a sensação de toque. O teste final em aparelhos físicos (pelo menos um Android de entrada e um iPhone) encontra o que a simulação esconde: fonte que renderiza diferente, imagem que pesa, alvo de toque que o polegar erra. No Framer, o ajuste por breakpoint é visual e por elemento: o mesmo conteúdo, três layouts, sem duplicar nada. Para os efeitos do layout na medição que o Google faz, o guia de Core Web Vitals cobre a ponte entre responsividade e ranking.
Breakpoints são um dos assuntos em que migração para plataformas modernas simplifica a vida: o sistema nativo de breakpoints do Framer controla cada elemento por tela sem media queries manuais. Para quem vem de outra plataforma, a migração da M&C preserva o layout nos três tamanhos: e para a fundação técnica completa, o guia de SEO técnico.