clamp()関数とは？

clamp()関数はcssの関数で、値を上限と下限に設定しその間を動的に変化させることができます。

ざっくり言うと、clamp()関数を使えばメディアクエリを記述しなくてもPC、スマホのデバイスでも最適なフォントサイズに設定できます。

だいぶざっくり言いました。

clamp()関数の使い方

実際にclamp()関数を見ていきましょう

.text {
  font-size:clamp(14px,1.6vw,16px);
}

はい、こんな感じで使います。
clamp()関数は3つの引数を使います。左から最小値、推奨値、最大値の3つの値を入れることでこの1行でレスポンシブ対応を流動的に実現できます。
ちなみに上記の記述ではPCでは16px、スマホ時では14pxで表示されます。その中間は動的にサイズが変化するという関数になります。

もし、まだちょっとよくわからないという方は、まずはvwを理解するところから順を追って理解するといいかと思います。

vwはviewport widthのことでブラウザの幅（100vw）を基準とした単位です。
つまり、1vwとはブラウザ幅の100分の1のサイズということです。

1.6vwと設定した場合、ブラウザ幅が1000pxのときに16pxのサイズになるということですね。

このvwという単位がレスポンシブに記述するために重要な単位になるんです。

.text {
  font-size:1.6vw;
}

単純にフォントサイズを1.6vwとしたとき、ブラウザ幅によってフォントサイズが大き過ぎたり小さ過ぎたりします。
仮にブラウザ幅が1920pxだとしたたら、1.6vwのフォントサイズは30.72pxとなってしまいますし、390px（スマホサイズ）あたりに狭めていくと6.24pxとなってしまい、とても読めるサイズではありません。

そこでこのvwの単位に上限と下限を設けましょうと。
16px以上大きくならないように、そして14pxより小さくならないようにと認識すると理解しやすいかと思います。

font-size以外にも使えるclamp()関数

clamp()関数はfont-size以外でも使えます。

例えばmargin、padding、border-radiusなど。
下記のコードはボックスにmargin / padding / border-radiusにclamp()関数を適用したものです。

いかがでしょうか。実際に上記のコードを実装してみるとわかると思いますが、ブラウザ幅を可変していくと動的にmargin、padding、border-radiusの値が変化しているのがわかると思います。

clamp()を駆使していくとメディアクエリを記述しなくてもレスポンシブ対応が可能なことが分かります。

推奨値（vw）の考え方

clamp()関数の注意点として推奨値となるvwの値をどう捉えるかがあります。

ここではvwの値を関数の最大値と同等になるように設定しています。

つまり、最大値が16pxのときvwは1.6vwとしています。これはブラウザ幅が1000pxのときにvwの単位が16pxになるようになっています。

1000pxを下回ると1.6vwはその値を変化させていきpx換算すると数値が減少していくようになります。

900pxでは14.4px、875pxで下限の14pxになります。
複雑な計算が面倒な場合はだいたいこの基準でいいのではないかと思います。

もし1000pxからじゃなくてもう少し狭めてから縮小してほしい場合は、推奨値に最大値の0.125倍の値を入れると800pxから縮小しはじめます。

.text {
  font-size:clamp(14px, 0.125 * 16vw, 16px);
}

このように、計算式もいれることができます。
…が、毎回書くのは面倒ですね…。

まとめ

以上、clamp()関数の紹介でした。
コーディングをよりスマートに記述する上で、clamp()関数は見逃せないなと感じています。
デメリットとしては記述が少々面倒かなと。

clamp()関数をよりシンプルに記述するために、現在はscssの関数を駆使して対応しようと考えています。