UTILS.
Privadas por padrão
@

Construtor de media query CSS

Crie uma @media query responsiva com predefinições e copie-a.

Seus arquivos ficam neste dispositivo

Os arquivos são processados no navegador, nunca enviados. O site baixa o código e os recursos necessários. Sem contas ou rastreadores.

Use Baixar para salvar esta ferramenta em um único arquivo HTML para uso offline.

Privacidade →

Sobre esta ferramenta

Componha uma @media query responsiva escolhendo min-width, max-width ou um intervalo mais orientação, com predefinições de dispositivos em um clique, depois copie o wrapper. Tudo roda no seu navegador.

Perguntas frequentes

Qual é a diferença entre min-width e max-width?
min-width aplica os estilos naquela largura e acima (mobile-first), enquanto max-width os aplica naquela largura e abaixo.
Como funcionam as predefinições de dispositivos?
Cada predefinição preenche breakpoints típicos — celular até 767px, tablet de 768 a 1023px e desktop a partir de 1024px — que você pode ajustar depois.

Mais ferramentas