ずっとメディアクエリを切ることで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()関数を使っていきたいかな？など考えています。