Breakpoint (ponto de quebra)

A largura de tela em que o layout muda pra continuar legível e usável em outro tamanho de dispositivo.

Hard

O que é

Breakpoint é a largura de tela em que o layout do produto muda pra se adaptar a outro tamanho de dispositivo. Ele é a base do design responsivo, porque é o que permite que o mesmo conteúdo se reorganize pra continuar legível no desktop, no tablet e no celular.

Na prática, o time define alguns pontos de quebra a partir do conteúdo, e não de uma lista pronta de aparelhos. A pergunta certa é: a partir de qual largura este texto fica pequeno demais, esta imagem distorce, esta coluna não cabe mais? É justamente ali que o layout precisa quebrar.

Depois disso, vem a parte de testar de verdade, seja em aparelho físico, simulador ou no dev tools do navegador. Um breakpoint que parece bom so no Figma costuma quebrar na mão de quem usa, porque a tela real tem variáveis que o desenho não mostra.

Em uma frase

Vamos definir um breakpoint aqui, porque a partir dessa largura a coluna dupla não cabe mais.

A pergunta que ele responde

Em que largura de tela meu layout precisa mudar pra não quebrar no celular?

Quando usar

Ao desenhar qualquer layout que será visto em mais de um tamanho de tela, ou seja, praticamente tudo.

Como não usar

O erro é copiar uma lista fixa de breakpoints de dispositivos sem olhar pro próprio conteúdo, e depois não testar em tela real, contando que vai funcionar.

Na prática

Pense na coluna dupla do desktop que não cabe no celular. No breakpoint mais estreito, ela vira coluna única empilhada, e o conteúdo continua legível porque o layout quebrou no lugar certo.

Não confunda com

Vale separar breakpoint do design responsivo como um todo, porque um é parte do outro. O breakpoint é o ponto específico onde o layout muda, enquanto o design responsivo é o sistema inteiro que se adapta entre esses pontos. Ou seja, o breakpoint é o gatilho, e o responsivo é o comportamento completo.

D

Em inglês

Breakpoint

Pronúncia

breik-point

Também chamado de

breakpoint, ponto de quebra, quebra de layout

Origem

n/a

Fonte

Saiba mais

Ethan Marcotte, Responsive Web Design