メディアクエリいらず？clamp関数を使うべき理由【フォントサイズ,CSS】

スマホ向けに個別に、メディアクエリを使って、フォントサイズを指定していませんか?
実はそんなことしなくても、「clamp関数」という、CSSの関数がわずか1行の記載で解決してくれます。

CSSの関数、clamp関数って何?

文字の大きさなどを、最小値、推奨値、最大値の範囲で自動的に調整する関数です。
例えば、下記の例だと、フォントサイズは「2.08vw」だけど「16px以下」にはしないけど、「18px」以上にもならない
ということです。

h1 {
    font-size: clamp(16px, 2.08vw, 18px);
}

このブログのフォントサイズもclamp関数を使ってるので、開発者ツールでも開いて、画面の幅をいじってみてください。

最小値と、最大値をどうすればいいか迷っているなら下のカードのようなサイトを使うといいでしょう。
このサイトでは、任意のフォントサイズを入力すると、そのサイズにおける黄金比に基づいた最適な色々なサイズを算出できます。

推奨値のvwの決め方は下記の計算式でします

最小のフォントサイズ(これだと16px)　÷　最小のフォントサイズで止める画面サイズ(768pxなど)　✕　100　=　 vwの値

clamp関数を使うと、メディアクエリいらずに、スマホ用のフォントサイズにできます。
ぜひ便利ですので、使ってみてください！。

よかったらグッドボタン&シェアお願いします!

送信したコメントは承認作業を行うまで表示されません。ご了承ください。
なお名前の入力は任意でメールアドレスの入力も必要ありません。 CAPTCHA(画像認証)の文字が表示されない場合は再リロードしてください。