O que é uma consulta de mídia CSS?

Uma consulta de mídia CSS é uma técnica que permite aplicar diferentes estilos com base em características do dispositivo, como tamanho de tela, resolução, orientação ou esquema de cores. As consultas de mídia são a base do design web responsivo, permitindo que os sites adaptem seu layout e aparência em diferentes dispositivos - de smartphones a monitores de desktop. Elas usam a regra @media em CSS para aplicar estilos condicionalmente apenas quando certas condições são atendidas.

Descrição da ferramenta

Esta ferramenta ajuda você a gerar consultas de mídia CSS sem memorizar sintaxe complexa. Simplesmente selecione seu tipo de mídia alvo, especifique as dimensões, escolha os recursos do dispositivo, e a ferramenta gera a regra @media completa pronta para usar em suas folhas de estilo. Ela suporta todos os recursos modernos de consultas de mídia, incluindo dimensões de viewport, orientação de tela, proporções de aspecto, detecção de resolução e preferências de esquema de cores.

Recursos

  • Seleção de tipo de mídia: Escolha entre os tipos de mídia all, screen, print ou speech
  • Controles de dimensão: Defina largura/altura mínima e máxima com qualquer unidade CSS (px, em, rem, vw, etc.)
  • Recursos do dispositivo: Configure orientação, proporção de aspecto, resolução e preferências de esquema de cores
  • Condições personalizadas: Adicione qualquer recurso de mídia personalizado como capacidade de hover ou tipo de ponteiro
  • Operadores lógicos: Combine condições usando operadores AND, OR ou NOT para consultas complexas
  • Visualização ao vivo: Veja o código CSS gerado atualizar em tempo real enquanto você ajusta as configurações
  • Referência de breakpoints comuns: Acesso rápido a breakpoints padrão para celular, tablet, desktop e recursos especiais

Casos de uso

  • Criar layouts responsivos que se adaptam a diferentes tamanhos de tela
  • Segmentar dispositivos específicos como tablets ou smartphones
  • Implementar temas de modo escuro e modo claro
  • Otimizar folhas de estilo para impressão
  • Detectar telas de alta resolução (retina)
  • Ajustar layouts com base na orientação do dispositivo
  • Construir designs responsivos mobile-first ou desktop-first
  • Testar e aprender a sintaxe de consultas de mídia CSS