Du texte qui s’adapte sans media queries
Un titre de 16 px sur mobile et 32 px sur ordinateur demandait autrefois deux ou trois points de rupture. Avec clamp(), une ligne suffit : la taille grandit en douceur avec l’écran entre un plancher et un plafond. Le plus délicat est la valeur du milieu, un mélange d’une taille fixe et d’un pourcentage de la largeur d’écran. Ce générateur la calcule à partir des deux tailles qui vous importent.
Obtenir une valeur clamp() en quatre étapes
- Saisissez la plus petite et la plus grande taille, par exemple 16 et 32.
- Saisissez les largeurs d’écran auxquelles elles s’appliquent, par exemple 320 et 1280 pixels.
- Choisissez px ou rem et, si votre site change la taille de police racine, les pixels de 1rem. Choisissez la propriété CSS pour obtenir une déclaration prête.
- Copiez la valeur ou la déclaration. Le tableau et le curseur montrent la taille à toute largeur intermédiaire.
Le rôle des trois parties de clamp()
Le résultat ressemble à clamp(1rem, 0.6667rem + 1.6667vw, 2rem). La première valeur est la plus petite taille que la propriété peut prendre, la dernière la plus grande, et celle du milieu la droite qui les relie. L’outil calcule la pente comme la différence de taille divisée par la différence de largeur, et la partie fixe à partir de l’endroit où cette droite coupe une largeur d’écran de zéro. Si la taille doit diminuer sur les grands écrans, l’outil place d’abord la plus petite valeur, car clamp() attend toujours le minimum en premier.
Avec rem, le zoom reste fonctionnel
Les tailles en rem suivent la taille de police choisie par le visiteur dans son navigateur, pas les valeurs en px. Une taille uniquement en vw ignore totalement le zoom, ce qui peut échouer aux contrôles d’accessibilité. Associer une part en rem à la part en vw, comme le fait cet outil pour les tailles en rem, garde le texte agrandissable. Testez votre design à 200 % de zoom et ne laissez pas la plus grande taille dépasser environ deux fois et demie la plus petite.
Rien ne quitte votre navigateur
Les valeurs sont calculées dans la page. Le générateur n’envoie aucune requête réseau et ne conserve rien.