Gerador de Consultas de Mídia Gere consultas de mídia CSS com condições de recursos e pontos de quebra pré-definidos.

As consultas de mídia CSS usam a regra @media para aplicar estilos condicionalmente. A sintaxe é @media [tipo] e (condição) { regras }. Os tipos de mídia incluem tela, impressão e todos. Os recursos de mídia testam as capacidades do dispositivo: min-width/max-width para quebras responsivas, orientação para paisagem/retrato, prefers-color-scheme para modo escuro/claro, prefers-reduced-motion para sensibilidade à animação, hover para capacidade de pairar e pointer para precisão de entrada. Condições múltiplas são combinadas com a palavra-chave and para todas as condições ou separadas por vírgulas para qualquer condição. A palavra-chave not nega uma consulta. Recursos modernos como prefers-color-scheme e prefers-reduced-motion permitem o aprimoramento progressivo para preferências do usuário. Para a abordagem mobile-first, use consultas min-width. Para desktop-first, use max-width. Combinar ambos cria consultas de intervalo como @media (min-width: 768px) e (max-width: 1023px).