CSS Clamp Generator
Générez des valeurs CSS clamp() fluides pour font-size avec aperçu en direct.
① Définissez les tailles min/max et viewports ② Cliquez Générer ③ Copiez la valeur CSS clamp()
Qu'est-ce que CSS clamp() pour la typographie fluide ?
La fonction CSS clamp(min, préféré, max) permet une typographie véritablement fluide qui s'adapte entre deux largeurs de viewport sans breakpoints. La valeur préférée combine une unité relative au viewport (vw) et un décalage rem, calculés pour que la taille de police corresponde exactement au minimum au viewport minimum et au maximum au viewport maximum.
Questions fréquentes
CSS clamp(min, préféré, max) prend trois arguments. min est la plus petite valeur possible, préféré est la valeur idéale (généralement une expression vw + rem), max est la limite supérieure. Le navigateur maintient toujours le résultat entre min et max.
La pente est (tailleMax - tailleMin) / (viewportMax - viewportMin). Multipliée par 100 donne le coefficient vw. L'intercept rem est (tailleMin - pente × viewportMin) / rootSize. Le clamp final : clamp(minRem, coefVw + interceptRem, maxRem).
Les media queries produisent des sauts abrupts aux breakpoints définis. clamp() produit une interpolation linéaire lisse entre deux tailles. Aucun breakpoint nécessaire, code plus court, résultat visuellement plus soigné.
Pour CSS vanilla, déclarez les valeurs comme propriétés custom dans :root. Pour Tailwind v3 dans theme.extend.fontSize. Pour Tailwind v4 utilisez @theme dans le fichier CSS.
CSS clamp() est supporté par tous les navigateurs principaux depuis 2020. Support global supérieur à 97%. Pour les navigateurs legacy, un fallback px uniquement avant la déclaration clamp().
clamp() fonctionne pour toute propriété de longueur bénéficiant d'une mise à l'échelle fluide. Pour la typographie, il élimine les @media pour font-size. Pour l'espacement, il crée des mises en page proportionnelles.
Problèmes courants : (1) Root font size incorrecte. (2) Unités mixtes sans conversion. (3) Min supérieur au max. (4) Coefficient vw trop grand. Toujours tester avec le simulateur de viewport.