Breakpoints
ProntoA régua
Cada linha é uma faixa, e a barra mostra onde ela começa e termina, de 0 a 1600px. As linhas tracejadas são larguras de aparelho; a vermelha é a sua janela. Uma classe com prefixo vale da faixa dela para cima: md:flex vale no tablet e no computador.
- Celular 375px
- Tablet 768px
- Notebook 1280px
- Desktop 1440px
- Sua janela
- Celular
sem prefixo0 a 767pxa base - Tablet
md:768 a 1023px238 usos - Computador
lg:a partir de 1024px75 usos
Medindo a largura da janela…
As três faixas, e o que cada uma carrega
| Faixa | Prefixo | A partir de | Teste em | Usos | O que muda |
|---|---|---|---|---|---|
| Celular | nenhum | 0px | 375px | — | O desenho de partida: uma coluna, menu na gaveta, cartões que rolam de lado. Toda classe sem prefixo vale aqui — e nas faixas de cima, até alguém mudar. |
| Tablet | md: | 768px | 768px | 238 (76%) | A virada principal: duas colunas onde havia uma, formulário lado a lado, o respiro da página sobe de 16 para 24px. |
| Computador | lg: | 1024px | 1280px | 75 (24%) | Três ou quatro colunas, a barra de menu inteira, prévia e nota lado a lado. A página para de crescer em 1320px (E56): acima disso, só a margem em volta aumenta. |
Como usar
Escreva o celular primeiro, sem prefixo, e acrescente o que muda: grid-cols-1 md:grid-cols-2 lg:grid-cols-4. O contrário — começar do computador e desfazer no celular — dobra o trabalho. O max-md: (“só no celular”) existe, para a exceção, e não como ponto de partida.
Teste nas três larguras: 375, 768 e 1280px — o Computador, Tablet e Celular do palco. E a 320px, que é o reflow do SC 1.4.10 (400% de zoom em 1280): nada pode rolar de lado.
sm:, xl: e 2xl: não geram CSS: a classe some sem erro. O npm run audit reprova quem as escrever, com o arquivo e a linha.