Gerador de Media Query CSS
Opções de Media Query
Consulta
Recursos de mídia
CSS dentro da media query
Estado
Inativo
Visualização ao vivo
Media query preview
Item 1
Item 2
Item 3
Item 4
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.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador de grade CSS
Crie layouts de grade CSS com colunas, linhas, lacunas, alinhamento, visualização ao vivo e CSS pronto para cópia.
Utilitários Diversos
›
Gerador de Flexbox CSS
Crie layouts Flexbox com preview em tempo real, controles de alinhamento, quebra de linha, direção, gap e CSS pronto para copiar.
Utilitários Diversos
›
Gerador de Container Query CSS
Gere container queries CSS com tipo de contêiner, nome do contêiner, breakpoints e declarações responsivas.
Utilitários Diversos
›
Gerador de padrão de fundo CSS
Crie padrões de fundo CSS com pontos, grades, listras, linhas diagonais e tabuleiros de xadrez.
Utilitários Diversos
›
Perguntas frequentes
O que é uma media query CSS?
Uma media query CSS aplica estilos somente quando o navegador ou o dispositivo atende a certas condições, como largura de tela ou esquema de cores.
Devo usar largura mínima ou largura máxima?
Use min-width para layouts mobile-first e max-width quando quiser direcionar telas menores diretamente.
As consultas de mídia podem detectar o modo escuro?
Sim. O recurso `prefers-color-scheme` permite adaptar a interface às preferências de modo claro ou escuro.
As consultas de mídia podem melhorar a acessibilidade?
Sim. O recurso prefere movimento reduzido permite reduzir ou remover animações para usuários que preferem menos movimento.