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