1. O Que Sao Breakpoints

Breakpoints sao os pontos de ruptura em que o layout de uma pagina muda para se adaptar ao tamanho da tela. Eles sao definidos via media queries no CSS e representam a espinha dorsal do design responsivo moderno.

O conceito surgiu com a chegada dos smartphones e se consolidou com a publicacao do artigo "Responsive Web Design" por Ethan Marcotte em 2010. Desde entao, cada framework CSS desenvolveu seu proprio conjunto de breakpoints, gerando a necessidade de ferramentas como esta para comparar e converter valores.

2. Breakpoints por Framework

Cada framework possui filosofia e valores distintos. Tailwind CSS adota uma abordagem mobile-first com cinco breakpoints (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px), enquanto Bootstrap 5 usa seis (com extra-small implicito abaixo de 576px). Material Design segue a logica de densidade de informacao com pontos em 600px, 960px, 1280px e 1920px.

Conhecer esses valores e fundamental para integrar componentes de diferentes bibliotecas ou migrar projetos entre frameworks sem surpresas visuais.

3. px, rem ou em?

A unidade usada na media query afeta como ela responde ao zoom do navegador. px e absoluto — o breakpoint dispara sempre no mesmo numero de pixels fisicos, independente de zoom. em e relativo ao font-size do elemento raiz (html), geralmente 16px, e considerada a melhor pratica para media queries por respeitar as preferencias de acessibilidade do usuario. rem se comporta igual a em em media queries na maioria dos navegadores modernos.

"Use em em media queries para garantir que usuarios com zoom aumentado ou font-size customizado no navegador vejam o layout correto para o seu viewport real."

4. Mobile-first vs Desktop-first

A estrategia mobile-first define o layout base para telas pequenas e usa min-width para expandir progressivamente. E a abordagem recomendada pela maioria dos frameworks modernos, pois forca o desenvolvedor a priorizar o conteudo essencial antes de adicionar complexidade visual.

A estrategia desktop-first faz o caminho inverso com max-width. Ainda e comum em projetos legados ou quando o contexto primario de uso e desktop.

5. Quando Criar Breakpoints Customizados

Os breakpoints de frameworks sao pontos de partida, nao regras absolutas. Em um design system proprietario, faz sentido definir breakpoints alinhados ao grid e aos componentes do produto, nao aos valores arbitrarios de um framework de terceiros.

• Crie breakpoints onde o conteudo quebra, nao onde um framework manda
• Evite proliferacao de breakpoints — cinco ou menos ja cobrem a grande maioria dos casos
• Documente os valores como CSS custom properties para facilitar manutencao
• Use a aba "Custom" desta ferramenta para definir e exportar seu conjunto personalizado

6. Perguntas Frequentes

Posso misturar breakpoints de diferentes frameworks no mesmo projeto?

Tecnicamente sim, mas nao e recomendado. Misturar pode gerar inconsistencias visuais e dificultar a manutencao. Se precisar usar componentes de bibliotecas distintas, defina um conjunto unico de breakpoints no seu design system e adapte os componentes a eles.

Qual a diferenca entre container e breakpoint?

O breakpoint e o ponto em que o layout muda. O container e a largura maxima do conteudo dentro daquele breakpoint. Por exemplo, no Bootstrap, o breakpoint lg e 992px, mas o container max-width em lg e 960px — com margem de 16px em cada lado.

A ferramenta funciona offline?

Toda a logica de calculo e conversao roda no navegador, sem necessidade de servidor. Apos o carregamento inicial da pagina, voce pode usar a ferramenta sem conexao com a internet.