clamp() というCSS関数を使用します。
例えば、clamp(18px,1.75vw,24px)は、値を「最小18px、基本は1.75vw、最大24px」に収める指定です。
つまりこういう意味です。
最小値:18px
基準値:1.75vw
最大値:24px
1.75vwって何？
vwは画面幅に対する割合です。
1vw=画面幅の1%なので、
1.75vw=画面幅の1.75%
になります。
実際どう動くの？
たとえば画面幅が
500pxのとき
1.75vw=8.75px
でも最小が18pxなので、18pxになる
1000pxのとき
1.75vw=17.5px
これも18px未満なので、18pxになる
1200pxのとき
1.75vw=21px
18〜24の間なので、21pxになる
1600pxのとき
1.75vw=28px
でも最大が24pxなので、24pxになる。つまり一言でいうと
フォントサイズでよく使うと、こんな感じ。
font-size: clamp(18px,1.75vw,24px);
これは、
スマホでは18px以下にならない
中間サイズでは画面に合わせて少しずつ大きくなる
PCでは24px以上にならない
という動きになります。
昔の書き方だとメディアクエリを何本も生やして調整していたけど、clamp()はそれをかなりスッキリできる便利な機能です。
clampの対応ブラウザは?
今の主要ブラウザではほぼ使って大丈夫です。MDNでも「広く利用可能」で、主要ブラウザ全体では2020年7月ごろから安定して使える扱いです。
ざっくり言うと、Chrome79以降、Edge79以降、Firefox75以降、Safari13.1以降は対応です。Safari11.1〜13は部分対応で、IEは非対応です。
なので、普通の現行サイトならclamp()を使って問題ないです。気にするべきは、IEやかなり古いSafariをまだ相手にする場合だけです。
古いブラウザも少し意識するなら、こう書くのが無難です。
.title {
font-size: 24px;
font-size: clamp(18px, 1.75vw, 24px);
}
この書き方なら、clamp()非対応ブラウザは上の24pxを使い、対応ブラウザは下のclamp()で上書きします。@supportsを使う方法もありますが、まずはこの2行で十分なことが多いです。@supports自体も主要ブラウザで広く使えます。
必要なら次に、「2026年時点でwebpオンリーと同じ感覚で、clamp()を気にせず使っていいか」まで実務目線で整理します。