Calculateur CSS clamp pour tailles fluides
Définissez les tailles aux deux bornes de largeur. Ajustez l’aperçu pour examiner la valeur fluide entre ces limites.
Fonctionne localement dans votre navigateur · clamp() · vw · rem
Définissez les tailles aux deux bornes de largeur. Ajustez l’aperçu pour examiner la valeur fluide entre ces limites.
Fonctionne localement dans votre navigateurLe calculateur transforme deux tailles extrêmes et les largeurs de fenêtre où elles s’appliquent en une seule expression clamp(). Il écrit la règle pour font-size, padding, gap ou margin, affiche la valeur à toute largeur de l’intervalle et copie le CSS final. Tout s’exécute dans la page.
L’aperçu ne redimensionne pas votre fenêtre : le curseur simule une largeur de fenêtre et l’élément de démonstration reçoit la même valeur en px que l’expression produirait à cette largeur. Sous la plus petite largeur, le navigateur conserve la taille minimale ; au-dessus de la plus grande, la maximale.
L’expression est la droite qui relie les deux extrêmes. Avec les valeurs par défaut, la pente vaut (32 − 16) ÷ (1440 − 320) × 100 = 1.4286vw et l’ordonnée à l’origine 16 − 1.4286 × 320 ÷ 100 = 11.4286px : la règle s’écrit clamp(1rem, 0.7143rem + 1.4286vw, 2rem).
À 960 px, le terme central donne 0.7143rem + 1.4286vw = 25.14px, exactement ce qu’affichent la lecture et l’élément d’aperçu. Les termes sont arrondis à quatre décimales et la valeur affichée à deux.
Avec l’unité rem, chaque longueur de l’expression est divisée par la taille de police racine : avec les 16 px par défaut, l’intervalle 16 → 32 px devient 1rem → 2rem, tandis qu’une racine de 20 le transforme en 0.8rem → 1.6rem. Le coefficient vw n’est pas converti, car un vw est une fraction de la fenêtre et non de la racine.
Le champ racine est une constante de conversion, pas un réglage envoyé au navigateur. Le rendu ne correspond à l’aperçu que si ce champ correspond au font-size de l’élément html de la page qui recevra la règle.
Les tailles acceptent les décimales et doivent être supérieures ou égales à 0 ; le maximum ne peut pas être inférieur au minimum et la plus grande largeur doit dépasser la plus petite. Des extrêmes égaux sont autorisés et donnent une règle plate comme clamp(1rem, 1rem + 0vw, 1rem).
Un intervalle impossible ou un champ de taille ou de largeur vide efface la règle, les pastilles d’exemple, la lecture et l’aperçu, et désactive Copy CSS jusqu’à ce que l’intervalle redevienne valide : le presse-papiers ne reçoit jamais une règle qui ne correspond pas aux champs affichés. Le champ racine n’est requis que lorsque l’unité de sortie est rem.