La déclaration : clamp()
comment calculer les valeurs préférées
sachant que :
1rem = 16px
et étant donné que :
minWidth = 320px ou 20rem (320/16)
maxWidth = 1200px ou 75rem (1200/16)
minFontsize = 2rem
maxFontsize = 4rem
en premier lieu, calcul de l’intersection :
yAxisIntersection ou intersection = -minWidth * slope + minFontSize
yAxisIntersection ou intersection = -20 * 0.03636364 + 2 = 1.2727272
en deuxième lieu, calcul de la pente :
slope ou pente = (maxFontSize - minFontSize) / (maxWidth - minWidth)
slope ou pente = (4 - 2) / (75 - 20) = (2) / (55) = 0.03636364
en dernier lieu, qualification de la valeur préférée :
preferredValue ou valeur préférée = yAxisIntersection[rem] + (slope * 100)[vw]
preferredValue ou valeur préférée = 1.2727272rem + 3.636364vw
enfin, la déclaration sera :
font-size: clamp(2rem, 1.273rem + 3.636vw, 4rem);
Voir démonstration