ClampCalc
Créer clamp

Un font-size sans saut

Générez une déclaration font-size responsive

Transformez les tailles mobile et bureau en une déclaration linéaire bornée et vérifiez pente et écarts aux limites.

Formule CSS détaillée

Comment ce clamp de taille de police adaptative est calculé

font-size: clamp(1rem, 0.909091rem + 0.454545vw, 1.25rem);

Pour 16 px à 320 px et 20 px à 1200 px, la pente vaut (20 − 16) ÷ (1200 − 320) = 0,004545 px par pixel de largeur. Multipliée par 100, elle donne 0,454545vw ; l’ordonnée à l’origine vaut 16 − (0,004545 × 320) = 14,545455 px, soit 0,909091rem avec une racine de 16 px.

Vérification des limites : 14,545455 px + 0,454545vw donne 16 px à 320 px et 20 px à 1200 px avant l’arrondi de sérialisation.

clamp(minimum, valeur préférée, maximum) maintient 1rem sous la petite limite et 1,25rem au-dessus de la grande. Vérifiez les écarts d’arrondi, le zoom du texte, le contenu et la mise en page avant utilisation.

Calcul CSS local

Limites de largeur et de valeur

Les valeurs restent sur cet appareil
Largeurs d’écran
px
px
Valeurs souhaitées à ces largeurs
px
px
px
Unités de sortie

Échelles linéaires croissantes uniquement. Utilisez le jeton après vérification du contenu, du zoom, de la racine et de la mise en page.

Preuve du CSS arrondi

Clamp généré

rem · 6
Valeur clampclamp(1rem, 0.909091rem + 0.454545vw, 1.25rem)
Déclaration font-sizefont-size: clamp(1rem, 0.909091rem + 0.454545vw, 1.25rem);
Propriété personnalisée--fluid-size: clamp(1rem, 0.909091rem + 0.454545vw, 1.25rem);

Aperçu des coefficients copiés

17.999998px

Le design fluide doit rester lisible à chaque largeur.

Données de la formule

Pente exacte
0.0045454545 px/px
Ordonnée exacte
14.54545455px
CSS à la petite limite
16px · Δ 0px
CSS à la grande limite
19.999996px · Δ -0.000004px

Les écarts comparent vos px à la formule arrondie. ClampCalc ne choisit pas les valeurs appropriées et ne prouve pas l’accessibilité.