Générateur de media queries CSS
Générez des blocs de media queries CSS mobile-first ou desktop-first à partir de presets Bootstrap, Tailwind ou de breakpoints personnalisés.
Générateur de media queries CSS
Choisissez une échelle de breakpoints et cet outil écrit les blocs @media correspondants, prêts à coller dans votre feuille de style. Sélectionnez les presets Bootstrap ou Tailwind pour réutiliser les breakpoints que ces frameworks incluent, ou basculez sur Personnalisé et entrez vos propres largeurs sous forme de liste séparée par des virgules ou des sauts de ligne — les nombres simples comme "480, 768, 1024" sont nommés automatiquement, ou associez chacun à une étiquette comme "tablet:768".
La sortie mobile-first s'étend vers le haut avec min-width uniquement, le modèle dans lequel la plupart du CSS des composants est écrit aujourd'hui; desktop-first s'étend vers le bas avec max-width uniquement, le plus grand breakpoint en premier. Activez la syntaxe de plage pour délimiter chaque breakpoint des deux côtés — chaque bloc s'applique uniquement dans cette bande au lieu de s'étendre en cascade. Le plus grand breakpoint reste sans limite supérieure. Les largeurs s'impriment en px, em ou rem, en supposant la taille de police racine courante de 16px pour la conversion. Quatre commutateurs supplémentaires ajoutent des requêtes autonomes pour l'orientation, les pointeurs compatibles hover, prefers-color-scheme et prefers-reduced-motion, utiles lorsqu'une page a besoin de ces vérifications aux côtés de ses breakpoints de mise en page. Changez le format de sortie en SCSS et chaque bloc devient un @mixin nommé avec @content à la place, pour que votre build Sass puisse @include partout où la règle est nécessaire.
Une liste de breakpoints qui ne se résout pas à quelque chose d'utilisable — vide, ou chaque entrée non numérique — est signalée clairement plutôt que de produire un CSS cassé; les largeurs en double s'effondrent en un bloc, conservant leur prénom. Les très longues listes personnalisées sont limitées pour que le collage d'une valeur énorme ou mal formée ne gèle jamais l'onglet.
Tout s'exécute localement dans votre navigateur — rien de ce que vous tapez n'est téléchargé nulle part. Copiez le résultat, téléchargez-le sous forme de fichier .txt, ou envoyez-le directement à l'entrée d'un autre outil pour continuer à travailler dessus.