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.
Guias relacionados
Entenda o workflow por trás desta ferramenta e o que revisar depois.
Checks de SEO técnico antes de enviar um site
Um checklist para garantir que buscadores possam descobrir, rastrear, entender e indexar páginas importantes.
Como depurar respostas JSON de API
Formate a resposta, confirme o status HTTP, valide o schema e compare mudanças do payload antes de alterar código.
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.
Privacidade e uso
Verificações rápidas sem conta
Toolinix foi feito para tarefas curtas de desenvolvimento: cole uma amostra segura, revise o resultado, copie o que precisa e siga em frente.
Sem login
Você pode usar as ferramentas sem criar conta, assinar newsletter ou salvar um workspace.
Local quando possível
Formatadores, geradores, codificadores e utilitários de texto geralmente rodam no navegador. Diagnósticos de rede podem precisar de uma consulta assistida pelo servidor para verificar URLs, domínios ou IPs públicos.
Não cole segredos
Não cole senhas de produção, chaves privadas, tokens de acesso, dados de clientes ou dados regulados em ferramentas online, a menos que sua própria política de segurança permita.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.