clamp関数の使い方

CSS
コピー
font-size: clamp(最小値, 推奨値, 最大値);

フォントサイズの可変はpxではなくvwを単位にすることが多いと思いますがどこまでも小さくなったり大きくなったりします。
clamp関数を使うと最小値と最大値を決めることができます。
min-widthとかmax-widthみたいな感じですね。

CSS
コピー
font-size: clamp(16px, 2.9vw, 32px);

上記の例だと、16pxから32pxの間で可変になってくれます。

実装サンプル

clamp関数はIEではサポートされてない

便利なclamp関数ですがIEのみサポートされていないようです。

記事が古かったらこちらから最新状況が見れます。

IEではサポートされていないので実際clamp関数を使うときは以下のようにする必要がありそうです。

CSS
コピー
font-size: 32px; /* IE対策 */
font-size: clamp(16px, 2.9vw, 32px);

このようにすればIE以外は可変になり、IEでは32pxで表示されるようになります。

IEでもフォントサイズを可変にする方法

どうしてもIEでフォントサイズを可変にしたい場合はcssのcalc関数を使うと実現できます。

calc関数を使う方法では、例えば画面幅500px~1100pxの間でフォントサイズ16px~32pxで可変にするということができます。

しかし、calc関数を使う方法は注意が必要でどこまでも画面幅に応じてフォントサイズが大きくなったり小さくなったりしてしまうということです。

やり方としては公式に当てはめて設定します。
少しめんどくさいですがこれでIEにも対応できます。

CSS
コピー
/* 公式 */
font-size: calc(A + B * (100vw - C) / D);

• ・A・・・最小文字サイズ
• ・B・・・最大文字サイズ – 最小文字サイズ
• ・C・・・最小画面幅
• ・D・・・最大画面幅 – 最小画面幅

例えば、画面幅500pxから1100pxの間をフォントサイズ16pxから32pxで可変にしたい場合は以下のようになります。

CSS
コピー
font-size: calc(16px + 16 * (100vw - 500px) / 600);

実装サンプル

Safariでclamp関数が効かない時の対処法

Safariはclamp関数をサポートしているにも関わらずうまく計算してくれないようです。
※2022年1月23日現在

そんな時は次のCSSを追加してみてください。

CSS
コピー
*{
    min-height: 0vw; /* Safari clamp関数対策 */
}

なぜmin-heightを0vwにすると解決するのかは不明なのでわかる方がいればTwitterかお問い合わせフォームからご教授いただけると助かります。