✏️
clamp関数で文字の大きさをいいかんじにする
clamp関数を使うと、PC用・スマホ用で指定していた文字の大きさを一行で表せます。
画面幅1440px以上（PC）のときは文字の大きさを28pxに、最小サイズ（スマホ）のときは文字の大きさを14pxにしたい場合、以下のようになります。
画面幅が中途半端なとき（960pxなど）は、画面幅に応じていいかんじに文字サイズを調整してくれます。
p{
font-size: clamp(14px, 1.6vw, 28px);
}
計算方法
文字サイズの間にある1.6vwは、以下のサイトで計算ができます。
clamp関数
今回はこのように計算し1.6vwを求めました。
計算方法その②
以下のような場合も、ジェネレーターを使って設定可能です。（こちらも、画面幅を変更している最中は文字サイズがいいかんじに変わります）
- 画面幅が390px以下の場合は14px
- 画面幅が1080px以上の場合は30px
clamp(0.875rem, 0.31rem + 2.32vw, 1.875rem);
Discussion