Générateur de Media Queries CSS | Composez des règles @media depuis breakpoints et caractéristiques

Choisissez le type de breakpoint et la valeur en pixels, cochez les caractéristiques de média souhaitées, et l'outil assemble une règle @media prête à copier. La barre d'aperçu indique quelles largeurs de viewport la requête couvre.

💡 À propos de cet outil

Écrire à la main @media (min-width: 768px) ne pose pas de problème, mais la friction arrive dès qu'on empile les conditions : imbriquer les parenthèses, placer correctement le mot-clé and et se rappeler si prefers-reduced-motion prend la valeur reduce ou no-preference. Le piège classique, c'est une requête de plage où min-width et max-width se chevauchent d'un pixel : les deux règles s'activent à la largeur limite exacte et les styles se cumulent.

Cet outil propose trois modes de breakpoint (min-width, max-width, plage), des préréglages d'appareil à 375 / 768 / 1024 / 1440px, un champ de pixels personnalisé et des cases pour les caractéristiques de média courantes. Il écrit un bloc @media syntaxiquement correct au fil de la saisie, et la barre d'aperçu colore la portion de la plage 0–1920px réellement ciblée : un contrôle rapide pour vérifier que vous n'avez pas inversé min et max.

🧐 Questions fréquentes

Faut-il baser ses breakpoints sur min-width ou max-width ? Pour du CSS mobile-first, utilisez min-width : les petits écrans servent de base et vous superposez les surcharges vers le haut. Si vous réduisez une mise en page bureau existante, max-width va plus vite. Les modèles Mobile First et Desktop First sont des gabarits de chaque approche.

Comment cibler « tablette uniquement » avec une plage ? Fixez la borne supérieure un pixel sous le breakpoint suivant, par exemple min-width: 768px et max-width: 1023px. Avec 1024px comme plafond, les deux requêtes s'activent sur un appareil large de 1024px exactement. Le modèle Tablet Only charge déjà 768–1023px.

Puis-je inclure prefers-color-scheme ou hover ? Oui. Cochez une caractéristique et elle se joint à la condition de largeur, par exemple and (prefers-color-scheme: dark). Pour viser le mode sombre quelle que soit la largeur, mettez la valeur personnalisée à 0 ou utilisez le modèle Dark Mode.

Génère-t-il seulement des chaînes and, ou aussi or ? Il construit des conditions reliées par and dans une seule règle @media. Pour un OU logique (listes de requêtes séparées par des virgules), générez deux règles et placez-les côte à côte.

Les breakpoints en em ou rem sont-ils pris en charge ? La sortie est en px. Si votre équipe standardise les breakpoints en em, divisez la valeur px générée par la taille de police racine (souvent 16px) et changez l'unité.

📚 Le saviez-vous

Les media queries ont été normalisées dans la Recommandation CSS3 Media Queries du W3C en 2012 ; auparavant, le responsive passait surtout par la mesure de window.innerWidth en JavaScript et le basculement de classes. Les caractéristiques de « préférence utilisateur » comme prefers-color-scheme et prefers-reduced-motion sont arrivées plus tard avec Media Queries Level 5, permettant au CSS de réagir au mode sombre du système ou à un réglage d'accessibilité sans le moindre script. Un courant de pensée grandissant remet en cause les breakpoints nommés d'après les appareils : plutôt que « mobile, tablette, bureau », on place un breakpoint là où le contenu lui-même commence à casser, une idée qui a nourri l'engouement pour les container queries, une spécification voisine.