Générateur de requêtes CSS
Guide
Générateur de requêtes CSS
Construire un CSS précis @media des règles pour tout point d'arrêt et combinaison de fonctionnalité sans mémoriser la syntaxe. Choisissez un prédéfini de cadre, sélectionnez le type de requête et activez les fonctionnalités supplémentaires que vous avez besoin — l'outil assemble automatiquement un bloc valide avec à la fois la syntaxe classique et moderne.
Comment utiliser
- Choisissez un Prédéfini de cadre — Bootstrap 5, Tailwind CSS, Material Design ou personnalisé — puis choisissez la largeur du point d'arrêt.
- Choisissez la Type de requête: largeur minimale (mobile-first), largeur maximale (desktop-first) ou une plage entre deux largeurs.
- Sélectionnez la Style de syntaxe: classique
min-width/max-widthou la nouvelle syntaxe des requêtes de média niveau 4 (width >= ...). - Activez n'importe quelle Fonctionnalités supplémentaires que vous souhaitez combiner avec le point d'arrêt : orientation, préfère le schéma de couleur, préfère le mouvement réduit, souris ou pointeur.
- Copiez le manifest.json généré
@mediabloque dans le panneau de sortie et le dépose dans votre feuille de style.
Caractéristiques
- Préférences de framework – Points d'arrêt en un clic pour Bootstrap 5, Tailwind CSS et Material Design, ainsi qu'un mode personnalisé pour toute valeur en pixels.
- Trois modes de requête – Générer un point d'arrêt mobile-first
min-width, desktop-firstmax-widthou une requête précise ciblant une classe de dispositif spécifique. - Syntaxe classique et moderne – Alterner entre les règles traditionnelles
min-width/max-widthet la syntaxe plus claire des requêtes de média niveau 4 (width >= X). - Fonctionnalités combinées de média – Ajouter orientation, préfère le schéma de couleur, préfère le mouvement réduit, la capacité de souris et la précision du pointeur sur toute requête de largeur.
- Mises à jour en temps réel – Le résultat se régénère à chaque modification des entrées, vous permettant ainsi de visualiser instantanément différentes combinaisons.
- Copier & télécharger – Récupérez le CSS en un clic ou enregistrez-le sous forme de
.cssfichier pour votre projet.
FAQ
-
Qu'est-ce qu'une requête de média CSS ?
Une requête de média CSS est une fonctionnalité qui applique des styles uniquement lorsque l'environnement de navigation correspond à certaines conditions, comme la largeur de la fenêtre, l'orientation de l'écran ou les préférences de l'utilisateur. C'est le mécanisme fondamental de la conception responsive, permettant à une seule feuille de style d'adapter ses styles aux téléphones, tablettes, ordinateurs et au-delà.
-
Quelle est la différence entre largeur minimale et largeur maximale ?
La largeur minimale applique des styles lorsque la fenêtre est au moins aussi large, ce qui constitue la base du CSS mobile-first — vous commencez par les styles pour écrans petits et ajoutez des règles progressivement lorsque la fenêtre grandit. La largeur maximale applique des styles lorsque la fenêtre est au plus large, ce qui correspond à l'approche desktop-first où vous réduisez progressivement les styles pour les écrans plus petits.
-
Qu'est-ce que la nouvelle syntaxe d'intervalle dans les requêtes de média niveau 4 ?
Les requêtes de média niveau 4 introduisent des opérateurs de comparaison comme (largeur >= 768px) et (400px <= largeur <= 1200px) comme une alternative plus claire aux paires min-width et max-width. Elle améliore la lisibilité des intervalles et est prise en charge par tous les navigateurs modernes, bien que les navigateurs plus anciens exigent encore la syntaxe classique.
-
Qu'est-ce que fait prefers-color-scheme ?
prefers-color-scheme détecte si l'utilisateur a choisi un thème clair ou sombre au niveau du système d'exploitation. En le combinant avec des requêtes de média, vous pouvez servir automatiquement un palette de couleurs en mode sombre, sans avoir besoin d'un commutateur sur la page.
-
Pourquoi combiner plusieurs fonctionnalités dans une seule requête ?
En combinant des fonctionnalités avec le mot-clé and, une seule règle peut cibler un contexte précis, par exemple un écran large en mode sombre qui prend en charge la souris. Cela permet de garder les feuilles de style compactes et d'éviter de superposer des règles redondantes qui doivent être synchronisées manuellement.
Installez nos extensions
Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide
恵 Le Tableau de Bord Est Arrivé !
Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !
Outils essentiels
Tout voir Nouveautés
Tout voirMise à jour: Notre dernier outil a été ajouté le 19 juin 2026
Impliquez-vous
Aidez-nous à continuer à fournir des outils gratuits et précieux
