Generador de consultas de medios Genera consultas de medios CSS con condiciones de características y puntos de interrupción preestablecidos.

Las consultas de medios CSS utilizan la regla @media para aplicar estilos condicionalmente. La sintaxis es @media [tipo] y (condición) { reglas }. Los tipos de medio incluyen pantalla, impresión y todos. Las características de los medios prueban las capacidades del dispositivo: min-ancho/máx-ancho para puntos de interrupción responsivos, orientación para paisaje/retrato, prefieres-esquema-de-color para modo oscuro/claro, prefieres-movimiento-reducido para sensibilidad a la animación, hover para capacidad de desplazamiento y puntero para precisión de entrada. Se combinan varias condiciones con la palabra clave 'and' para todas las condiciones o separadas por comas para cualquier condición. La palabra clave 'not' niega una consulta. Características modernas como prefieres-esquema-de-color y prefieres-movimiento-reducido permiten mejoras progresivas para preferencias de usuario. Para el enfoque móvil primero, se utilizan consultas min-ancho. Para escritorio primero, se utilizan consultas max-ancho. Combinar ambos crea consultas de rango como @media (min-ancho: 768px) y (max-ancho: 1023px).