Calculateur de CSS clamp()

Vous donnez deux points : une taille à une petite largeur d’écran et une autre à une grande. L’outil trace une ligne droite entre les deux, si bien que la taille grandit en douceur à mesure que l’écran s’élargit, puis l’enveloppe dans clamp() pour qu’elle ne descende jamais sous votre taille petite ni ne dépasse la grande. Entre les deux largeurs, la taille varie de façon fluide ; au-delà, elle reste sur la limite la plus proche.

Les bornes sont en rem et la partie centrale qui varie garde une composante en rem : ainsi le texte continue de grandir quand un lecteur zoome ou augmente la taille de police par défaut de son navigateur, ce qu’une valeur uniquement en pixels ou en unités de viewport peut empêcher. Vous saisissez les tailles en pixels parce que c’est plus naturel, et l’outil les convertit en rem à partir de votre taille de police racine.

Oui. La même valeur convient pour le padding, la marge, le gap, la largeur ou la hauteur — partout où va une longueur. Passez l’aperçu sur « Boîte » pour voir l’espacement grandir au lieu du texte. Si vos tailles petite et grande sont identiques, le résultat se réduit à une longueur fixe, car il n’y a plus rien à faire varier.

Oui : tous les navigateurs actuels prennent en charge clamp() depuis 2020, vous pouvez donc utiliser la valeur telle quelle, sans solution de repli. Avec un maximum très élevé ou une variation très rapide, mieux vaut vérifier à 200 % de zoom que le texte s’agrandit toujours pour ceux qui en ont besoin.