font-sizeのレスポンシブ対応

ずっとメディアクエリを切ることでfont-sizeのレスポンシブ対応をしてきました。しかし、悩むことが多く、最近では、文字サイズごと計算させて可変にする方法を取ることが多いです。

ViewPortをメディアクエリで指定してサイズを計算させる

viewpart最大値を決めて計算させる

font-sizeをcalc()関数を用いて、ある一定の画面サイズの範囲では最低値から最高値まで拡大し、最大の画面サイズから上は、一定の大きさで指定するものです。

私は、だいたい、画面サイズ最小値は割と一般的な「768px」、また最大値は日本でシェアNo.2のワイド16:9スクリーン「1366px」に合わせることが多いです。
シェアNo.1は1920pxですが、そこまでいくと、その画面サイズに行くまでに結構ステップ数があるため、最大を例えば24pxあたりにしていた場合に、見出しと本文のジャンプ率が少し寂しく感じるため、1366pxにしています。

/* 16px@768px 〜 24px@1366px */
@media (min-width: 768px) {
  h3 {
    font-size: calc(1rem + ((1vw - 7.68px) * 1.3378));
    /* アクセシビリティを維持するためにcalcの基本値（1rem）をremで記述 */
    /* 1.3378 = 100 * フォントサイズの違い / ビューポート幅の違い */
    /* Safari resize fix */
    min-height: 0vw;
  }
}
/* このブレークポイントを超えたら拡大を停止 */
@media (min-width: 1366px) {
  h3 {
    font-size: 24px;
  }
}

viewport最大値なしで計算させる

/* 16px@768px 〜 24px@1366px */
@media (min-width: 768px) {
  h3 {
    font-size: calc(1rem + ((1vw - 7.68px) * 1.3378));
    /* Safari resize fix */
    min-height: 0vw;
  }
}

clamp()関数を使う

/* 16px@768px 〜 24px@1366px */
h3 {
  font-size: clamp(16px, calc(1rem + ((1vw - 7.68px) * 1.3378)), 24px);
  /* Safari resize fix */
  min-height: 0vw;
}

Min-maxを使う

/* 16px@768px 〜 24px@1366px */
h3 {
  font-size: min(max(16px, calc(1rem + ((1vw - 7.68px) * 1.3378))), 24px);
  /* Safari resize fix */
  min-height: 0vw;
}

min()、max()、clamp() 関数が2020年4月Firefox75で対応

これらの方法の中では、viewport最大値のを指定する一番上の方法が無難でしたが、FireFoxで未対応だったmin()関数、max()関数、clamp()関数が、2020年4月7日のリリースノートで、使えるようになったとの報告がありました。

Firefox 75 for developers-ウェブ開発者向けの変更点一覧

https://developer.mozilla.org/ja/docs/Mozilla/Firefox/Releases/75

様子をみながらですが、そうなると、一番シンプルなclamp()関数を使っていきたいかな？など考えています。