フォントサイズを画面幅に応じて可変にする

remを使う時の注意点

remで起こる問題を解決するにはSCSSであれば自作関数を使う事で解決出来ます。

scssでのfunction関数の設定

@function 関数名(引数) {
  @return 
}

@function rem($px) {
  @return ($px / 16) * 1rem;
}


h1 {
  font-size: rem(36); /* font-sizeが36px相当にする */
}

スマホ時にフォントサイズを画面幅に応じて可変にする

SCSSでの方法

フォントサイズを可変にするにはremにvwとcalcを合わせて使用します。
ルート（html）のfont-sizeをcalc(100vw / 39)とすることで、iPhone12、13、14などの画面幅390pxのときは基準のフォントサイズを30pxとし、ルートより下ではremを使っていくという方法です。
ただこの方法は文字の最大サイズのみを指定している為、文字が際限なく小さくなってしまいます。なので必然的にメディアクエリーの数も多くなってしまいます。

@media (max-width:960px){
html{
font-size: calc(100vw / 96);/*幅が960pxの時の設定*/
}
h1 {
font-size:4.0rem;/*960pxの時40pxに*/
}
}

cssのclamp関数を使った方法

clamp()関数を使用すると、最小値と最大値を定義してその間の値を可変にすることができます。

記述方法

font-size: clamp(最小値, 推奨値, 最大値);

最小値
推奨値が最小値よりも小さくなると、要素の長さは最小値が適用されます。
最大値
推奨値が最大値よりも大きくなると、要素の長さは最大値が適用されます。
推奨値
要素の大きさが最小値より大きく、最大値より小さいとき、要素の大きさは推奨値が適用されます。推奨値は固定値NG

推奨値の計算方法

最小のフォントサイズ ÷ 最小のフォントサイズで固定にしておきたい画面サイズ　✕　100　=　 vwの値

「24px」（最小のフォントサイズ）÷500px(レスポンシブ メディアクエリ ) ✕　100 = 4.8
このように計算をすることができます

h1{
font-size:clamp(24px,4.8vw,40px) ;//40~24pxの間で可変かつ500px以下は24pxに固定
}

min-max-calculator.9elements.com