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