なんだかんだで使用頻度高いです。
デバイスやブラウザのサイズが様々なので、表示崩れ防止にmax-widthを付ける事が多いです。
そういう場合、最近はフォントサイズをCSSでレスポンシブにしています。
以下の感じです。
font-size: clamp(8px, calc(100vw / 33.33), 24px);## 解説
clamp() は clamp(最小値, 推奨値, 最大値) のように3つの値を指定します。
それぞれの値がどう決めるのか、bodyをmax-width:800pxとしているイメージで説明します。
1. 最大値： 24px
800pxの時に24pxが最適で、それ以上は大きくならないようにしたいので、最大値に24pxを指定します。
2. 推奨値（可変値）： calc(100vw / 33.33)
ここが計算のポイントです。 calc(ビューポート幅 / 数字) という計算式を使って、
「ビューポート幅が800pxの時に、計算結果が24px」になるようにします。
800px / N = 24px
この式が成り立つような数字 N を求めます。
N = 800 ÷ 24 N ≈ 33.33
この計算結果を使って、推奨値の部分を calc(100vw / 33.33) とします。100vw は「ビューポートの幅全体」を意味する単位なので、
画面幅に応じてフォントサイズが自動で変わってくれます。
3. 最小値： 8px
画面がすごく小さくなった時に、文字が読めなくならないようにするための「下限」のサイズです。800pxよりも小さいスマートフォン（例えば幅280pxなど）で見た時に、
文字が小さくなりすぎるのを防ぎます。
この8pxという値はあくまで一例なので、デザインに合わせて 変更してもOKです！
この設定により、
- ビューポートの幅が
800px以上の時は、フォントサイズは24pxで固定されます。 - ビューポートの幅が 約
280px〜800pxの間は、画面サイズに合わせてフォントサイズが8px〜24pxの間で滑らかに変化します。 - ビューポートの幅が 約
280px以下の時は、フォントサイズは8pxで固定されます。
## なぜPCの大きな画面でも問題ないのか
その理由は、clamp()が**上限（最大値）と下限（最小値）**を設定してくれる、安全装置のような働きをするからです。
font-size: clamp(8px, calc(100vw / 33.33), 24px);
このコードの動きをPCの大きな画面で見てみましょう。
- PCの画面幅は大きい PCのビューポート幅（例えば
1920px）だと、真ん中の計算式calc(100vw / 33.33)の100vwは1920pxになります。 計算すると1920px / 33.33は約57pxという非常に大きなフォントサイズになってしまいます。 clamp()が最大値でストップをかける しかし、clamp()は「計算結果が最大値の24pxを超えたら、強制的に24pxを使いなさい」という命令をします。- 結果 そのため、PCの画面がどれだけ大きくなっても、計算結果が
24pxを超えた時点でフォントサイズは24pxでピタッと固定されます。
つまり、要素の幅が max-width: 800px で止まるのと同じように、フォントサイズも clamp() のおかげで 24px で止まってくれる、というわけです。 これにより、PCでは常に 800px の幅の要素の中に 24px のフォントが表示され、デザインが崩れることはありません。
