clamp() とは
clamp(最小値, 可変値, 最大値) の形で書くCSSの関数です。
画面幅に応じて値がなめらかに変わり、指定した上下限からははみ出しません。
従来はメディアクエリで「768px以上なら20px、1024px以上なら24px」と刻んでいた部分が、
1行で済むようになります。
なぜ rem と vw を混ぜるのか
可変部分を vw だけで書くと、ブラウザの文字サイズ設定を変えても追従しません。
文字を大きくして読んでいる利用者にとって、これは実害になります。
rem を足しておくと、利用者の設定を尊重しつつ画面幅にも反応します。
このツールが必ず rem + vw を出力するのはそのためです。
刻みすぎないでください
clamp() は便利ですが、すべての値に個別のclamp()を書くと管理できなくなります。
見出し・本文・余白の3〜4種類に絞り、CSS変数に入れて使い回すのが現実的です。
生成した値は --fs-h1 のような変数名で定義しておくと、後から一括で調整できます。
このツールについて
入力内容はブラウザの中だけで処理され、サーバーに送信されることはありません。