English
EspañolGerador de media queries CSS (breakpoints)
Escolha os breakpoints e as consultas extras. Redimensione a janela e veja quais media queries estão valendo agora.
Os breakpoints do seu CSS prontos
Tudo é feito no seu aparelho: nada é enviado para a internet.
Disponível em: 
Gerador de media queries CSS (breakpoints): para que serve
Media queries fazem o layout mudar conforme a tela. Este gerador monta o esqueleto do CSS com os breakpoints do Bootstrap 5 (576, 768, 992, 1200 e 1400 px), do Tailwind (640, 768, 1024, 1280 e 1536 px), um conjunto simples ou os seus.
Escolha mobile-first (min-width), desktop-first (max-width, com o ajuste de 0,02 px usado pelo Bootstrap) ou faixas, em px ou em, e acrescente consultas para modo escuro, menos movimento, mouse ou toque, orientação, impressão e contraste alto. Redimensione a janela para ver quais media queries estão valendo.
Como usar
- Escolha os breakpoints e a abordagem.
- Marque as consultas extras.
- Copie ou baixe o CSS.
Quando usar
- Começar o CSS de um site novo.
- Padronizar breakpoints da equipe.
- Aprender como as media queries funcionam.
Perguntas frequentes
Mobile-first ou desktop-first?
Mobile-first é o mais usado hoje: o CSS base é o do celular e cada min-width acrescenta ajustes para telas maiores. Assim o celular, que costuma ter conexão e processador mais fracos, lê menos regras. Desktop-first (max-width) faz o contrário e é útil para adaptar sites antigos.
Quais breakpoints usar?
Os do Bootstrap 5 são 576, 768, 992, 1200 e 1400 px; os do Tailwind são 640, 768, 1024, 1280 e 1536 px. Melhor do que copiar um framework é colocar o breakpoint onde o seu layout quebra, mas os dois conjuntos são bons pontos de partida.
Por que usar em nas media queries?
Em media queries, 1em vale o tamanho de fonte padrão do navegador (normalmente 16 px). Se a pessoa aumentou a fonte padrão, os breakpoints em em acompanham e o layout troca no ponto certo, o que não acontece com px.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.