Générateur de requêtes média Générer des requêtes média CSS avec des conditions de fonctionnalités et des points d'arrêt prédéfinis.

Les requêtes média CSS utilisent la règle @media pour appliquer conditionnellement des styles. La syntaxe est @media [type] et (condition) { règles }. Les types de média incluent l'écran, l'impression et tous. Les fonctionnalités de média testent les capacités de l'appareil : min-width/max-width pour les points d'arrêt réactifs, orientation pour le paysage/le portrait, prefers-color-scheme pour le mode sombre/clair, prefers-reduced-motion pour la sensibilité aux animations, hover pour la possibilité de survol et pointer pour la précision de saisie. Plusieurs conditions sont combinées avec le mot-clé and pour toutes les conditions, ou séparées par des virgules pour n'importe quelle condition. Le mot-clé not nie une requête. Les fonctionnalités modernes comme prefers-color-scheme et prefers-reduced-motion permettent l'amélioration progressive pour les préférences de l'utilisateur. Pour l'approche mobile en premier, utilisez des requêtes min-width. Pour l'approche ordinateur de bureau en premier, utilisez des requêtes max-width. La combinaison des deux crée des requêtes d'intervalle comme @media (min-width: 768px) et (max-width: 1023px).