Aussi disponible en : English · Español · Português · العربية
Générateur de media queries : des points de rupture sans chevauchement
Générez vos breakpoints dans quatre écritures et voyez l’intervalle exact que chacune laisse à découvert.
Qu’est-ce qu’un point de rupture ?
Un point de rupture est la largeur de fenêtre à laquelle une mise en page change. En CSS on l’exprime par une media query — le plus souvent par deux, une pour le cas étroit et une pour le cas large — et tout le responsive repose sur l’idée que ces deux requêtes se partagent proprement l’axe des largeurs.
Elles ne se le partagent pas. Media Queries niveau 4 définit les deux préfixes sans ambiguïté : min- vaut l’opérateur >= et max- vaut <=. Tous deux incluent la valeur écrite. Donc (max-width: 600px) et (min-width: 600px) sont vraies en même temps à exactement 600 pixels, et le navigateur tranche en appliquant la règle qui vient ensuite — silencieusement, et différemment selon l’ordre de votre feuille de style.
Ce générateur prend une liste de points de rupture et écrit les requêtes de quatre façons, en indiquant pour chacune si la frontière est exacte, si elle se chevauche ou si elle laisse un trou — et, dans ce dernier cas, l’intervalle précis de largeurs qui ne satisfait aucune des deux.
Comment l’utiliser
- Saisissez vos points de rupture, séparés par des virgules ou des espaces. Un nombre seul prend l’unité choisie à côté du champ ; écrivez 40rem pour la changer sur une valeur précise. Les boutons d’exemple chargent les points de rupture de Bootstrap, ceux de Tailwind et les deux écritures exactes.
- Choisissez comment écrire la requête sous le point de rupture. Quatre possibilités : la syntaxe d’intervalle, la forme négative, un retrait de 0,02 ou un retrait d’une unité entière. Le tableau du dessous se met à jour avec ce que chacune produit à la frontière, et la note au-dessus nomme l’outil réel qui a fait ce choix.
- Vérifiez le dernier panneau avec votre propre navigateur. Il passe les requêtes générées à matchMedia et affiche en direct la réponse de votre fenêtre. Zoomez et les nombres bougent : le zoom est le moyen le plus simple de se donner une largeur fractionnaire, c’est-à-dire précisément le cas qui échappe à un point de rupture décalé.
Pourquoi un point de rupture décalé ne peut pas être juste
Puisque min- vaut >= et max- vaut <=, les deux requêtes écrites autour d’un point de rupture forment un couple de demi-droites fermées. Deux demi-droites fermées ne peuvent pas se partager une droite. Soit elles ont la même extrémité, et une largeur satisfait alors les deux ; soit on les écarte, et un intervalle ouvert entre elles n’en satisfait aucune. Il n’y a pas de troisième cas, ni de choix de valeurs qui y échappe.
La spécification le dit elle-même, avec une franchise inhabituelle sur le remède. Sa note observe que les auteurs décalent leurs valeurs pour que les deux requêtes ne soient pas vraies simultanément, puis relève que le couple 320 / 321 « ne tient pas compte de la possibilité de largeurs de fenêtre fractionnaires », et décrit la version améliorée à 320,01px comme réduisant « nettement le risque qu’une largeur passe entre les mailles ». C’est une probabilité, selon les mots mêmes du standard, et non une solution.
Les quatre stratégies proposées ici sont les quatre réponses réelles, et chaque taille de trou a été mesurée sur un artefact publié plutôt que lue dans une documentation. La feuille de style de Bootstrap 5.3.3 associe (min-width: 576px) à (max-width: 575.98px) : un trou de 0,02px. postcss-media-minmax, le convertisseur canonique de la syntaxe d’intervalle vers les anciens préfixes, transforme (width < 600px) en (max-width: 599px) — un trou d’un pixel entier — et son retrait n’est même pas constant : donnez-lui 37.5rem et il enlève un millième au lieu d’une unité.
Les deux écritures exactes, et ce qui les sépare
La syntaxe d’intervalle règle vraiment le problème, parce qu’elle dispose des comparaisons strictes qui manquent aux préfixes. (width < 600px) à côté de (width >= 600px) couvre chaque largeur exactement une fois, y compris 600. C’est ce que produit Tailwind v4 : sa variante md: se compile en (width >= 48rem) et sa variante max-md: en (width < 48rem).
Il existe une seconde écriture exacte, et elle est plus ancienne que la première. Nier une requête inclusive en donne une stricte : not all and (min-width: 600px) est vraie précisément lorsque la largeur est inférieure à 600, et cette forme est valable depuis Media Queries 3, si bien qu’elle atteint des navigateurs qui n’ont jamais connu la syntaxe d’intervalle. L’optimiseur de Tailwind réécrit ses requêtes d’intervalle exactement ainsi, et Lightning CSS fait de même — d’où le fait que le CSS compilé que l’on lit partout semble employer les anciens préfixes inclusifs alors que la requête basse est en réalité une négation.
Les deux ne sont pourtant pas interchangeables, et aucun convertisseur ne le signale. La section 2.4 de la même spécification indique qu’une caractéristique désignant une notion absente de l’appareil « doit toujours être évaluée à faux ». Un navigateur vocal n’a pas de largeur : (width < 600px) y est donc fausse, tandis que not all and (min-width: 600px) nie un faux et devient vraie. Elles s’accordent sur tout média visuel et divergent partout ailleurs.
Limites assumées
Le trou laissé par un décalage est réel mais étroit, et sur un écran où chaque largeur de fenêtre est un nombre entier de pixels CSS vous n’y tomberez jamais. Ce qui produit des largeurs fractionnaires, c’est le zoom du navigateur, une densité de pixels non entière et une barre de défilement qui en prend une fraction — d’où l’invitation à zoomer plutôt qu’une affirmation sur la fréquence du phénomène. Cette page ne publie volontairement aucun taux : l’objet honnête, c’est l’intervalle exact et un moyen de le vérifier soi-même, pas un pourcentage dont j’aurais dû inventer la population.
L’outil ne compare par ailleurs que les caractéristiques width et height. Les préfixes valent pour n’importe quelle caractéristique de type intervalle — resolution, aspect-ratio, color — et l’arithmétique y est la même, mais c’est sur la largeur que la question se pose réellement. Les caractéristiques discrètes comme pointer ou orientation n’acceptent aucun préfixe, ce que la spécification énonce sans détour.
Enfin, le CSS produit est un squelette : deux blocs media par point de rupture, avec une règle vide à l’intérieur. Il est fait pour être collé puis rempli, non pour tenir lieu de feuille de style. Et il vaut la peine de regarder d’abord l’échelle mobile-first affichée en dessous : n’écrire que la requête min- par point de rupture et laisser chaque règle écraser la précédente contourne tout le problème, puisque la seconde requête n’est jamais écrite.
Pourquoi est-ce gratuit ?
Ce sont quelques opérations sur une poignée de nombres, plus le matchMedia de votre propre navigateur, et tout se passe dans cet onglet au fil de la frappe. Aucun serveur n’intervient : il n’y a donc rien à facturer ni de compte à créer.
Rien n’est envoyé. Les points de rupture que vous saisissez restent sur votre machine.