文字や余白を滑らかに小さくしたり大きくしたりするのに便利なclamp関数

課題の海浜工務店を作成中。

今回のカンプ幅は1920px。
ヘッダーを小さくしていくとかなり早い段階で文字が詰まってくる。

ブレイクポイントはなるべく768px近づけたい。
でも、かなり難しそう。

間隔や文字をもうすこし小さくできたらなって思っていた。

そこで知ったclamp()関数。

最小値、最大値の間で文字の大きさや余白を変更することが出来る関数clamp

font-size: clamp(最小値,推奨値,最大値);

文字や余白を画面幅だけに依存させて表示させると、大画面の時は大きくなりすぎるし、小さい画面の時は小さくなりすぎる。

画面幅で計算されたpx数より最小値より小さい場合は最小値を、最大値より大きい場合は最大値が選ばれる。

これで、文字も余白も大きくなりすぎず、小さくなりすぎない。

推奨値の決め方

だけど推奨値ってどうやって決めたらええの？

最大値と最小値はカンプ見たらわかるけどさ。

ってときは以下のサイトがおすすめ。

あわせて読みたい

Min-Max-Value Interpolation A tool that calculates the CSS clamp formula to interpolate between two values in a given viewport range.

カンプ幅が大きい場合、ブレイクポイントをなるべく小さくするためにこの関数を使い倒す！(笑)