Gerador de Media Query CSS
Opções de Media Query
Visualização ao vivo
Sobre este gerador de Media Query CSS
Esta ferramenta ajuda você a criar media queries CSS responsivas sem escrever toda a sintaxe manualmente. Escolha breakpoints, orientação, esquema de cores, preferência de movimento e suporte a hover.
É útil para criar cards responsivos, layouts, blocos de navegação, estilos de modo escuro e regras de movimento reduzido com melhor acessibilidade.
Como usar
- Escolha um tipo de mídia, como tela, impressão ou todas.
- Defina pontos de interrupção de largura mínima ou largura máxima para seu layout responsivo.
- Opcionalmente, adicione orientação, esquema de cores, movimento reduzido ou condições de foco.
- Escreva o bloco CSS que deve ser aplicado dentro da media query.
- Copie o bloco @media gerado em sua folha de estilo.
Dicas
- Use max-width para substituições que priorizam dispositivos móveis ao segmentar telas menores.
- Use largura mínima para layouts progressivos que crescem do celular para o desktop.
- Use prefere movimento reduzido para reduzir transições e animações para usuários que o solicitarem.
- Use o esquema de cores prefere para estilos simples de modo escuro e modo claro.
Verificações de media queries antes de adicionar um breakpoint
Media queries devem responder ao conteúdo e às capacidades do usuário, não apenas a larguras comuns de dispositivos.
Use breakpoints do conteúdo
Adicione um breakpoint onde o layout deixa de funcionar, não para um modelo específico de celular, tablet ou desktop.
Evite lacunas nos limites
Teste valores exatos e use sintaxe de intervalos consistente para não excluir larguras fracionárias.
Respeite preferências
Revise prefers-reduced-motion, esquema de cores, contraste, forced colors e capacidades de entrada.
Teste viewports reais
Verifique orientação, zoom, interface do navegador, janelas divididas, views embutidas e traduções longas.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.