Gerador de CSS media queries
Gere blocos de media queries CSS de primeiro móvel ou primeiro desktop a partir de breakpoints Bootstrap, Tailwind ou personalizados.
Gerador de CSS media queries
Escolha uma escala de breakpoints e esta ferramenta escreve os blocos @media correspondentes, prontos para colar numa folha de estilos CSS. Use os presets integrados Bootstrap ou Tailwind para reutilizar os breakpoints que essas estruturas fornecem, ou mude para Personalizado e digite suas próprias larguras como "480, 768, 1024" — opcionalmente com labels descritivos como "tablet:768" para melhor organização.
A saída de primeiro móvel usa min-width apenas, o padrão moderno de desenvolvimento responsivo; primeiro desktop usa max-width apenas, começando do breakpoint maior. Ative a sintaxe de intervalo (min e max) para limitar cada breakpoint em ambos os lados, aplicando estilos apenas naquela faixa específica. As larguras são convertidas para px, em ou rem, assumindo a raiz de 16px. Quatro alternâncias adicionais permitem anexar consultas independentes para orientação do dispositivo, capacidade de hover, prefers-color-scheme e prefers-reduced-motion. Mude o formato de saída para SCSS e cada bloco torna-se uma @mixin nomeada com @content.
Uma lista vazia ou contendo apenas valores não numéricos é relatada claramente, nunca produz CSS quebrado ou inválido. Larguras duplicadas colapsam automaticamente a um único bloco, mantendo o primeiro nome. Listas muito longas ou malformadas são limitadas para garantir que a aba nunca congela.
Tudo funciona localmente no seu navegador — nada é enviado para qualquer servidor. Copie o resultado com um clique, baixe como ficheiro .txt, ou envie direto para outra ferramenta TextArray para continuar trabalhando.