メニュー 閉じる

CSSでfont-sizeをレスポンシブ対応にする

font-size: clamp(1rem, 2.5vw, 2rem);

()の中は左から順に最小値、推奨値、最大値になる。
2.5vwはブラウザの横幅に対して2.5%の割合で表示されるという意味。

つまり上の例は、1remよりは小さくならず、2remよりは大きくならず、ブラウザの横幅に対して2.5%の割合で大きくなったり、小さくなったりするということになる。

ただ、これを自分の狙い通りの値にするのは大変なので下記のサイトで計算してもらう

Min-Max-Value Interpolation
https://min-max-calculator.9elements.com/?16,24,320,1200