clamp()関数とは
clamp()関数は画面幅に合わせてフォントサイズ等の最小値・最大値を変化させてくれる関数です。
とても便利な関数ですが、推奨値等の計算が若干面倒ですよね。
今回はこの計算式を簡単に作ってくれるジェネレータの紹介です。
Min-Max-Value Interpolation
わかりやすいUIなので説明が必要ないかもしれませんが、使い方を説明しますね。
VALUESのMINにフォントの最小値、MAXに最大値を入力します。
VIEWPORTにはブラウザ幅の最小値と最大値を入力します。
あとは表示されている計算式をコピーして使用すればOK！
「Live font-size example」で実際にフォントサイズを確認することもできます。
JOURNALが気に入ったら「いいね」してね！
font-size: clamp(最小値, 推奨値, 最大値);