CLAMP

3 つの値を渡す

clamp() は 最小値 / 推奨値 / 最大値 の 3 つを受け取ります。 推奨値が最小と最大の間に収まっていればその値を使い、外に出たら近い側の端で止まります。

最小値

1rem

推奨値

0.8182rem + 0.9091vw — vw があるので幅に比例して伸びる

最大値

1.5rem

vw だけでは足りない

推奨値に 0.9091vw だけを書くと、320px のときは 2.9px にしかなりません。 vw は「幅の何%」でしかないので、傾きは決められても位置を決められないからです。

そこで定数の 0.8182rem を足し、320px でちょうど 16px を通るように高さを合わせます。 一次関数 y = ax + b の b にあたる部分です。 このツールは入力した 4 つの値からこの b を計算しています。

メディアクエリとの違い

メディアクエリはブレークポイントで値が飛びます。clamp() は区間の中を連続的に変わるので、途中のどの幅でも破綻しません。 中間の幅のためにブレークポイントを増やしていく必要もなくなります。

出力が rem な理由

px で固定すると、ブラウザの文字サイズ設定を大きくしても値が変わりません。 rem はルート要素のフォントサイズを基準にするので、その設定に追従します。 このツールが px で入力できても出力は rem なのはこのためです。