La déclaration : clamp()
comment calculer les valeurs préférées
sachant que :
1rem = 16px
et étant donné que :
minWidth = 360px ou 22.5rem (360/16)
maxWidth = 840px ou 52.5rem (840/16)
minFontsize = 1rem
maxFontsize = 2.5rem
en premier lieu, calcul de la pente :
slope ou pente = (maxFontSize - minFontSize) / (maxWidth - minWidth)
slope ou pente = (2.5 - 1) / (52.5 - 22.5) = (1.5) / (30) = 0.05
en deuxième lieu, calcul de l’intersection :
yAxisIntersection ou intersection = -minWidth * slope + minFontSize
yAxisIntersection ou intersection = -22.5 * 0.05 + 1 = -0.125
en dernier lieu, qualification de la valeur préférée :
preferredValue ou valeur préférée = (slope * 100)[vw] + yAxisIntersection[rem]
preferredValue ou valeur préférée = 5vw + -0.125rem
enfin, la déclaration sera :
font-size: clamp(1rem, 5vw + -0.125rem, 2.5rem);
Voir démonstration