Gerador de Media Queries
Defina breakpoints e visualize como o layout se comporta em cada largura de tela.
Propriedades CSS utilizadas
@media (max-width: ...)Aplica o bloco de CSS apenas quando a largura da viewport for igual ou menor que o valor definido — a base do design responsivo 'mobile-first' ou 'desktop-first'.
Breakpoints comunsNão existe um padrão oficial, mas faixas próximas a 576px (celulares), 768px (tablets) e 1200px (notebooks) cobrem a grande maioria dos dispositivos reais.
Perguntas frequentes
Mobile-first (usar min-width e escalar para cima) costuma gerar CSS mais enxuto; desktop-first (usar max-width) é mais intuitivo para projetos que nasceram no desktop.
Não — media query reage ao tamanho da viewport inteira; container query (@container) reage ao tamanho do elemento pai, útil para componentes reutilizáveis.
Na maioria dos projetos, 2 a 3 breakpoints bem escolhidos resolvem melhor que dezenas de faixas — teste nos conteúdos reais, não em dispositivos específicos.
Ferramentas relacionadas
Gerador de Layout Responsivo
Defina um grid que se adapta automaticamente ao tamanho do container com auto-fit e minmax.
Gerador de CSS Grid
Crie grades com colunas, linhas, gap e áreas nomeadas com pré-visualização instantânea.
Gerador de Aspect Ratio
Mantenha proporções de imagens e vídeos com a propriedade aspect-ratio.