Générateur de media queries CSS (breakpoints)
Choisissez les breakpoints et les requêtes supplémentaires. Redimensionnez la fenêtre et voyez quelles media queries s’appliquent actuellement.
Mode d’emploiLes breakpoints de votre CSS, prêts à l’emploi
Disponible en: 
Générateur de media queries CSS (breakpoints): à quoi ça sert
Les media queries font changer la mise en page selon l’écran. Ce générateur compose le squelette du CSS avec les breakpoints de Bootstrap 5 (576, 768, 992, 1200 et 1400 px), de Tailwind (640, 768, 1024, 1280 et 1536 px), un jeu simple ou les vôtres.
Choisissez mobile-first (min-width), desktop-first (max-width, avec l’ajustement de 0,02 px utilisé par Bootstrap) ou des plages, en px ou en em, et ajoutez des requêtes pour le mode sombre, le mouvement réduit, la souris ou le tactile, l’orientation, l’impression et le contraste élevé. Redimensionnez la fenêtre pour voir quelles media queries s’appliquent.
Mode d’emploi
- Choisissez les breakpoints et l’approche.
- Cochez les requêtes supplémentaires.
- Copiez ou téléchargez le CSS.
Quand l’utiliser
- Démarrer le CSS d’un nouveau site.
- Uniformiser les breakpoints de l’équipe.
- Apprendre comment fonctionnent les media queries.
Questions fréquentes
Mobile-first ou desktop-first ?
Le mobile-first est le plus utilisé aujourd’hui : le CSS de base est celui du mobile et chaque min-width ajoute des ajustements pour les écrans plus grands. Ainsi, le mobile, dont la connexion et le processeur sont souvent plus faibles, lit moins de règles. Le desktop-first (max-width) fait l’inverse et sert à adapter d’anciens sites.
Quels breakpoints utiliser ?
Ceux de Bootstrap 5 sont 576, 768, 992, 1200 et 1400 px ; ceux de Tailwind sont 640, 768, 1024, 1280 et 1536 px. Mieux vaut placer le breakpoint là où votre mise en page se casse que copier un framework, mais ces deux jeux sont de bons points de départ.
Pourquoi utiliser em dans les media queries ?
Dans les media queries, 1em vaut la taille de police par défaut du navigateur (en général 16 px). Si la personne a agrandi la police par défaut, les breakpoints en em suivent et la mise en page change au bon moment, ce qui n’est pas le cas avec les px.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.