UTILS.
100% no navegador
@

Construtor de media query CSS

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

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