Question 1

O que é um breakpoint CSS?

Accepted Answer

Um breakpoint CSS é uma largura de viewport específica onde o layout muda para se adaptar ao tamanho da tela, definido com media queries como @media (min-width: 768px).

Question 2

Quais são os breakpoints do Tailwind CSS?

Accepted Answer

O Tailwind CSS tem 6 breakpoints padrão: sm (640px), md (768px), lg (1024px), xl (1280px) e 2xl (1536px).

Question 3

Quais são os breakpoints do Bootstrap?

Accepted Answer

O Bootstrap 5 define 6 breakpoints: xs (< 576px), sm (≥ 576px), md (≥ 768px), lg (≥ 992px), xl (≥ 1200px) e xxl (≥ 1400px).

Question 4

O que é abordagem mobile-first?

Accepted Answer

Design mobile-first significa escrever estilos base para telas pequenas primeiro e usar min-width media queries para telas maiores.

Question 5

Posso definir breakpoints personalizados?

Accepted Answer

Sim. No Tailwind você pode estender breakpoints no tailwind.config.js. Esta ferramenta também permite adicionar breakpoints personalizados.

Visualizador de Breakpoints

Perguntas Frequentes

Comments & Feedback