Gerador de Media Queries CSS | Monte regras @media a partir de breakpoints e características

Escolha o tipo de breakpoint e o valor em pixels, marque as características de mídia desejadas e a ferramenta monta uma regra @media pronta para copiar. A barra de pré-visualização mostra quais larguras de viewport a consulta cobre.

💡 Sobre esta ferramenta

Escrever @media (min-width: 768px) à mão é tranquilo, mas o atrito aparece ao empilhar condições: aninhar parênteses, colocar a palavra and no lugar certo e lembrar se prefers-reduced-motion usa o valor reduce ou no-preference. A cilada clássica é uma consulta de intervalo em que min-width e max-width se sobrepõem por um pixel, então as duas regras disparam exatamente na largura limite e os estilos se duplicam.

Esta ferramenta oferece três modos de breakpoint (min-width, max-width, intervalo), presets de dispositivo em 375 / 768 / 1024 / 1440px, um campo de pixels personalizado e caixas para as características de mídia mais comuns. Ela escreve um bloco @media com sintaxe correta conforme você ajusta, e a barra de pré-visualização pinta a fatia do intervalo 0–1920px que a consulta realmente atinge: uma conferência rápida de que você não inverteu min e max.

🧐 Perguntas frequentes

Devo basear meus breakpoints em min-width ou max-width? Para CSS mobile-first, use min-width: as telas pequenas são a base e você empilha sobrescrições para cima. Se está reduzindo um layout de desktop existente, max-width é mais rápido. Os padrões Mobile First e Desktop First são modelos de cada abordagem.

Como mirar em "apenas tablet" com um intervalo? Defina o limite superior um pixel abaixo do próximo breakpoint, por exemplo min-width: 768px e max-width: 1023px. Se usar 1024px como teto, as duas consultas disparam em um dispositivo de exatamente 1024px. O padrão Tablet Only já carrega 768–1023px.

Posso incluir prefers-color-scheme ou hover? Sim. Marque uma característica e ela se junta à condição de largura, por exemplo and (prefers-color-scheme: dark). Para mirar no modo escuro em qualquer largura, coloque o valor personalizado em 0 ou use o padrão Dark Mode.

Ela gera só cadeias com and, ou também or? Ela monta condições unidas por and dentro de uma única regra @media. Para um OU lógico (listas de consultas separadas por vírgula), gere duas regras e coloque-as lado a lado.

Há suporte a breakpoints em em ou rem? A saída é em px. Se a sua equipe padroniza breakpoints em em, divida o valor px gerado pelo tamanho de fonte raiz (geralmente 16px) e troque a unidade.

📚 Curiosidades

As media queries foram padronizadas na Recomendação CSS3 Media Queries do W3C em 2012; antes disso, o comportamento responsivo geralmente envolvia medir window.innerWidth em JavaScript e alternar classes. As características de "preferência do usuário" como prefers-color-scheme e prefers-reduced-motion chegaram depois, no Media Queries Level 5, deixando o CSS reagir ao modo escuro do sistema ou a um ajuste de acessibilidade sem nenhum script. Uma corrente crescente questiona os breakpoints nomeados por dispositivo: em vez de "celular, tablet, desktop", você coloca um breakpoint onde o próprio conteúdo começa a quebrar, ideia que impulsionou o interesse pelas container queries, uma especificação irmã.