フォントサイズを可変させることができる便利なcss関数

こんにちは、ワタナベです！

今回は最近使っているcss関数のご紹介。

clamp

最小値、基準値、最大値を設定し、可変させることができます。

サンプルはこちら↓↓↓

ブログ幅の都合で、こちらで見た方が分かりやすいかも。
「TEXT 02」が可変します。

font-size: clamp(最小値, 基準値, 最大値);

と設定します。

最小値よりも小さくはならず、最大値より大きくなりません。
基準値にvw単位で設定してあげると、ウィンドウ幅によって最小値～最大値内で可変してくれます。

ウィンドウ幅ごとに設定することが減って楽なのでとても便利です(^^♪
こちらIEで動かないようですが、今はサポートも終了しているので使いやすいと思います！

▼THANKS！

それではまた次回。

ご閲覧ありがとうございました♪