[CSS]ビューポート幅(vw)に対してレスポンシブ対応の文字サイズを指定するテクニック -Responsive font size
Post on:2017年1月31日
フォントサイズをレスポンシブ対応で変化させるには通常、スクリーンのサイズごとに数種類のフォントサイズを用意していると思います。
CSSだけで、ルートのフォントサイズを元に最小値と最大値を指定し、その間のサイズはビューポート幅(vw)に対して自動で変化させるテクニックを紹介します。
フォント: たづがね角ゴシック(さっそく使ってみた)
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
Responsive Fonts -auto scaling the root font-size
最小値と最大値を定めたフォントサイズが増加するテクニック
この例では、フォントサイズはビューポート幅1rem(16px)〜48rem(768px)に設定されており、幅120rem(1920px)で上限値の2em(32px)になるよう増加します。これらは一つのCSSステートメントによって、すべてコントロールが可能です。
フォントサイズはすべて、em、remまたは%で定義します。
1 2 3 4 5 6 7 8 |
/* 1em@48em(768px) から 2em@120em(1920px) に増加*/ @media (min-width: 48rem) { :root { font-size: calc(100% + ((1vw - .48rem) * 1.389)); /* .48rem = viewportWidthMinimum /100 */ /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } } |
これらの値を数式で見てみましょう。
- viewportWidthMinimum
- ビューポートの幅の最小値
- fontSizeDifference
- フォントサイズの差
- viewportWidthDifference
- ビューポートの幅の差
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
fontSizeCalc = 100% + (1vw - 48rem / 100) fontSizeCalc = fontSizeCalc * 100 * fontSizeDifference / viewportWidthDifference fontSizeDifference = maxFontSize - minFontSize = 2em - 1em (or 32px - 16px) = 1em (or 16px) viewportWidthDifference = viewportMax - viewportMin = 120em - 48em (or 1920px - 768px) = 72em (or 1152px) Using pixels: fontSizeCalc = 100% + (1vw - 768px / 100) * 100 * 16px / 1152px = 100% + (1vw - 7.68px) * 1.389 Using em or rem: fontSizeCalc = 100% + (1vw - 48rem / 100) * 100 * 1em / 72em = 100% + (1vw - .48rem) * 1.389 |
上記の設定ではフォントサイズは同じ割合で増加し続けます。そのため、下記のMedia Queriesを加えて上限値を指定します。
1 2 3 4 5 6 |
/* 120rem(1920px)を超えたらフォントサイズの増加は停止 */ @media (min-width: 120em) { :root { font-size: 2rem; } } |
この指定でうまくいくことをFirefox, Safari, Chrome for WinとOS Xで確認しました。IEでは少し調整が必要です。
emまたはremでサイズ指定したオブジェクトにも適用
このテクニックは、emまたはremでサイズ指定したオブジェクトにも適用できます。Flexboxでレイアウトされたデモページでご確認ください。
sponsors