Générez un clamp() pour adapter le texte de façon fluide des petits écrans aux grands écrans.
clamp(min, preferred, max) utilise la valeur idéale mais ne la laisse jamais sortir de la plage min–max. Avec une valeur idéale de type rem + vw, le texte s'agrandit de manière linéaire avec la largeur du viewport et se stabilise aux deux extrémités. Une seule ligne remplace une série de media queries.
Une ligne droite passant par (viewport min., taille min.) et (viewport max., taille max.). Pente = (taille max. − taille min.) ÷ (viewport max. − viewport min.). Pente × 100 donne le coefficient en vw ; l'ordonnée à l'origine constitue la partie fixe.
Le rem s'adapte lorsque les utilisateurs augmentent la taille de police de base de leur navigateur. Figer la taille en px ignore ce réglage, ce qui pose un problème d'accessibilité. Utilisez rem sauf si vous avez une raison précise de ne pas le faire.
L'unité vw brute devient trop petite sur les écrans étroits et trop grande sur les écrans larges. clamp verrouille les extrémités.
Oui — les mêmes calculs s'appliquent à padding, gap et margin.
Tous les navigateurs majeurs depuis 2020. Pas IE, qui n'est plus pris en compte.
Il vous suffit d'indiquer vos tailles de police minimale et maximale ainsi que les largeurs de viewport minimale et maximale correspondantes.
Oui, un bouton dédié vous permet de copier instantanément la règle CSS clamp() générée.
La formule générée combine les unités rem et vw pour assurer une mise à l'échelle fluide entre vos limites minimale et maximale.
Non, le calculateur CSS clamp est entièrement gratuit et s'utilise directement dans votre navigateur, sans inscription.