Categoria: Desenvolvimento
Cola de Breakpoints Responsivos
Compare breakpoints entre frameworks, ou crie os seus próprios
Compare os breakpoints padrão de largura mínima usados por Tailwind, Bootstrap, Bulma e Material Design, copie media queries prontas para qualquer um deles, ou digite seus próprios nomes e larguras de breakpoint para gerar consultas personalizadas.
| Nome | Largura mínima |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
@media (min-width: 640px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1024px) {
/* lg */
}
@media (min-width: 1280px) {
/* xl */
}
@media (min-width: 1536px) {
/* 2xl */
}Digite um nome e uma largura em pixels por linha, por exemplo "md, 768".
| Nome | Largura mínima |
|---|---|
| sm | 480px |
| md | 768px |
| lg | 1100px |
| xl | 1440px |
@media (min-width: 480px) {
/* sm */
}
@media (min-width: 768px) {
/* md */
}
@media (min-width: 1100px) {
/* lg */
}
@media (min-width: 1440px) {
/* xl */
}Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Cada framework CSS escolhe seus próprios nomes e larguras em pixels para breakpoints, o que facilita esquecer qual se aplica onde ao alternar entre projetos. Esta ferramenta lista os padrões de quatro frameworks comuns lado a lado e transforma qualquer um deles — ou uma lista personalizada que você digitar — em blocos @media (min-width: …) prontos para colar.
Como usar
- Escolha um framework para ver seus breakpoints padrão e media queries.
- Copie o CSS gerado para os breakpoints que você precisa.
- Ou liste seus próprios nomes e larguras de breakpoint para montar consultas personalizadas.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Por que min-width e não max-width?
- Uma abordagem mobile-first com min-width faz os estilos base mirarem a tela menor, e cada breakpoint adiciona estilos para telas maiores, o que evita sobrescrever regras de um lado para o outro como acontece com os breakpoints do próprio framework.
- Esses valores correspondem exatamente aos padrões dos frameworks?
- Sim, são os breakpoints padrão documentados de cada framework. Se o seu projeto tiver uma configuração personalizada do Tailwind ou Bootstrap, use o construtor de breakpoints personalizados com os valores do seu próprio projeto.
- Como formato a lista de breakpoints personalizados?
- Um breakpoint por linha, como um nome e uma largura em pixels separados por vírgula ou espaço, por exemplo "md, 768".