レスポンシブ時に文字の大きさを親要素の幅に合わせて調整したい場合があります。
通常フォントは数値で指定してしまいますが、親要素の幅が縮まる時、文字が不自然に大きい時があります。メディアクエリで、区切ってフォントサイズを下げる方法もありますが、下記のようにclamp関数を使う方法もあります。この関数は動的に文字のサイズを調整できます。
font-size: clamp(12px, 2.6vw, 38px)
clamp関数は３つの引数と取ります。１番目の12pxは最小値で、フォントサイズは12pxより小さくなりません。２番目はビューポートの幅を%で示しています。ビューポートが1440pxの時に38pxだった場合、38／1440で2.6％になります。この割合で、ビューポートが狭くなると文字は縮小して行きます。３番目は最大値です。文字は38pxより大きくなりません。
上記を仕様することにより、レスポンシブ時の文字の大きさを動的に調整できます。
