Gerador de media query CSS responsiva
Gere media queries CSS responsivas (breakpoints comuns), diretamente no seu navegador.
Breakpoints aligned with Tailwind CSS. “min-width” = mobile-first approach (recommended).
🔒 100 % no cliente — nenhum dado enviado
Gere media queries CSS responsivas com breakpoints comuns (mobile, tablet, desktop) em poucos cliques. Copie código pronto para uso em seus layouts adaptativos. Tudo roda 100% no navegador, sem instalação ou envio de dados.
What is it for?
- ▸ Crie rapidamente breakpoints para mobile, tablet e desktop
- ▸ Adapte tipografia e grades com base na largura da tela
- ▸ Trate a orientação retrato ou paisagem do dispositivo
- ▸ Padronize breakpoints em um projeto de equipe
FAQ
Quais são os breakpoints CSS mais comuns?
Valores clássicos são 480px para mobile, 768px para tablet, 1024px para telas desktop pequenas e 1280px ou mais para telas grandes. Esses limites são diretrizes a ajustar conforme seu conteúdo.
Devo usar min-width ou max-width?
Em uma abordagem mobile-first, prefira min-width para adicionar estilos conforme a tela cresce. max-width combina com uma abordagem desktop-first. O gerador oferece ambos conforme suas necessidades.
Como direcionar telas Retina em CSS?
Você usa uma media query sobre densidade de pixels, como min-resolution: 2dppx, para servir imagens mais nítidas. Isso é útil para as telas de alta densidade de celulares e laptops recentes.