画面サイズを変化させた時のフォントサイズの挙動について考えつつも、後回しにていたのですが、twitterで以下の記事が目に止まったのでこれを気に勉強しようと思いました。

ですが僕は、数学がすごく得意なわけではないので理解度が足りないせいか、結局どうすればいいかわからないという状態になってしまいました。
そこで、一度自力で考えてみると、解決できたのでその内容を備忘録もかねて書きます。
同じように、上記のサイトを見ても結局どうすればいいかわからないという方の参考になれば幸いです。
この記事を読めばこんなことがわかる。
ゴールを確認する
今回行いたいこと
上記の画像のように、例えば
画面サイズ320px〜960pxの間を画面サイズに比例してフォントサイズを変更したい。
画面サイズ0px〜319pxまではフォントサイズを20px、画面サイズ961px以上はフォントサイズ40pxしにたい。
このように
- ある画面幅〜ある画面幅の間で画面サイズに比例してフォントサイズが変更されるようにしたい
- 上記の画面幅以外の画面幅の場合は指定したフォントサイズにしたい
という条件を満たすcssを書くことが今回のゴールとなります。
デモ
画面サイズに比例してフォントサイズを変化させてみる
まず、ある一定の範囲ないで画面サイズに比例してフォントサイズを変化させる方法を考えてみます。
ここでは比例する割合を求めなければいけません。
ですので、Xの変化量/Yの変化量となります。
よって①の式:(40 – 20)/(960 – 320)となります。
こちらのフォントサイズの挙動を一度見てみましょう。
この変化量の割合に現在の画面サイズを掛けるとフォントサイズを求めることができます。
赤の線が目指すべき値なのですが、真ん中の部分のフォントサイズが小さくなってしまっています。
この差分を埋めればゴールと同じ挙動になりそうですね。
では、この差分を求めるにはどうしたらいいでしょう。
画面幅960px地点でのフォントサイズ40pxから赤線上の960px地点でのフォントサイズ30pxを引けば出てきそうです。
40-30になりますが、そもそも、30を求める式を求めなければいけません。
ですので、30の部分を求める式は
②の式:40 – (40 – 20)/(960 – 320) * 960
となります。
そして差分を埋めなければいけないので①の式と②の式を足し合わせます。
③の式:((40 – 20)/(960 – 320) * 現在の画面幅) + (40 – (40 – 20)/(960 – 320) * 960)
これの挙動を見てみましょう。
見事一致しました。
現在は具体的な数字を入れていますが、これを変数へ置き換え値を変更しても対応できるようにします。
min_size:フォントサイズの最小値
max_size:フォントサイズの最大値
min_mq:メディアクエリの最小値
max_mq:メディアクエリの最大値
now_display:現在の画面幅
④の式:(((max_size – min_size) / (max_mq – min_mq))*now_display)+(max_size – (((max_size – min_size)/(max_mq – min_mq))*max_mq))
となります。
オリジナルの式と先のサイトの式を見比べてみる
先のサイトでは変数への変換をしておらず③のような式で完結しています。
- max_size → min_size
- max_mq → min_mq
1 2 3 4 5 |
$minSize:20; $minSize:40; $minMq:320; $maxMq:960; font-size: calc(#{$minSize} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMq}) / (#{$maxMq} - #{$minMq}))); |
実行してみるとわかるのですが、実はこれ動きません。
その理由はcalcの書き方にあります。
calcには単位の付け方にルールがあり、この場合は以下の部分にpxを付けなければなりません。
1 2 |
font-size: calc(#{$minSize} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMq}) / (#{$maxMq} - #{$minMq}))); ____________________↑______________________________________________________↑ |
ですが、minSize/minMqはどちらも別の箇所で使用するので新しく変数を用意して単位を付けたものを用意しなければなりません。
1 2 3 4 5 6 7 |
$minSize:20; $minSize:40; $minMq:320; $maxMq:960; $minSizePX: #{$minSize}px;//←単位をつける $minMqPX: #{$minMq}px;//←単位をつける font-size: calc(#{$minSizePX} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMqPX}) / (#{$maxMq} - #{$minMq}))); |
フォントサイズはよく使用するのでmixinでまとめ、簡単に使用できるようにしましょう。
scss
1 2 3 4 5 |
@mixin flexFontSize($minSize, $maxSize, $minMq, $maxMq) { $minSizePX: #{$minSize}px; $minMqPX: #{$minMq}px; font-size: calc(#{$minSizePX} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMqPX}) / (#{$maxMq} - #{$minMq}))); } |
以下のように呼び出すことで使用できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.hoge{ font-size:40px; } @media screen and (min-width:320px) { .hoge{ @include flexFontSize(40,80,320,960); } } @media screen and (min-width:960px) { .hoge{ font-size:80px; } } |
calcの単位の付け方は書いた式の内容によって変わるのですが、かなりわかりにくいですし、そのルールについて記載しているサイトが少ない状況です。
calcのルールについてこちらにまとめました。
まとめ
下記のcssで実装することができます。
1 2 3 4 5 |
@mixin flexFontSize($minSize, $maxSize, $minMq, $maxMq) { $minSizePX: #{$minSize}px; $minMqPX: #{$minMq}px; font-size: calc(#{$minSizePX} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMqPX}) / (#{$maxMq} - #{$minMq}))); } |
実際にフォントサイズを計算している部分は以下です
1 |
calc(#{$minSizePX} + ((#{$maxSize} - #{$minSize}) * (100vw - #{$minMqPX}) / (#{$maxMq} - #{$minMq}))) |
使用方法です
1 |
@include flexFontSize(フォントサイズmin,フォントサイズmax,画面サイズmin,画面サイズmax); |
コメント