はじめに
viewportに比例してフォントサイズが変動する奴です。
※このテクニックの一般的な名称が不明。
1
とりあえずこれだけでもいける。
html {
font-size: calc(100vw * .03126);
}
/* min */
@media(max-width: 320px) {
html {
font-size: calc(320px * .03126);
}
}
/* max */
@media(min-width: 521px) {
html {
font-size: calc(520px * .03126);
}
}
この方法ではviewportのサイズ変更に完全連動した動きになります。
「これ以上フォント大きくならなくていいよ」の点にメディアクエリを置く考え方。
フォントサイズが大きすぎたので補正値を掛けていますがこれは320px時に1.6remを指定した要素が16pxになったので0.03126としました。
フォントの拡大が極端すぎるようにも見えますが、「一行あたりの文字数」のバランスを崩したくないシチュエーションであればこれはこれで使えるのかも。
2
http://fvsch.com/code/css-locks/
http://coliss.com/articles/build-websites/operation/css/font-size-value-for-responsive.html
こちらの記事では
「viewport〇〇px時にfont-size〇〇」←→「viewport△△px時にfont-size△△」
「その中間をリニアにfont-sizeが遷移していく」と、更に汎用性の高いロジックが紹介されてました。すごい！
この方法は1のパターンよりも精密なサイズ指定が可能になりますね。
3
で、
「62.5%をルートに指定して子要素をremで記述しているサイト」に対し、
「各子要素の個別指定font-sizeをなるべく再調整しない形」で
上記サイトのテクニックを導入してみたいと思います。
html {
font-size: calc(.78125vw + 7.5px);
}
/* 10px */
@media(max-width: 320px) {
html {
font-size: 62.5%;
}
}
/* 15px */
@media(min-width: 961px) {
html {
font-size: 93.8%;
}
}
「320px時にルートがfont-size:10px」
「960px時にfont-size:15px」
になります。
子要素が1.6remと指定されていた場合は16px～24pxの遷移になります。
0.78125vwの式は
(max font-size px - min font-size px) / (max viewport px - min viewport px) * 100 = vw
で求めています。
(15px - 10px) / (960px - 320px) * 100 = 0.78125
これだけでは増加率が噛みあわず、閾値をまたぐ際にfont-sizeがガクっとなってしまうので、ここに7.5pxを足したらスムーズに遷移するようになりました。
しかしなぜ7.5px加算でうまくいくのか、どこから算出された数字なのかが分かりません。
（7.5pxは目分量で微調整しながらなんとなくうまくいってる数値を割りだしただけで根拠不明の数値です。）
font-size: calc(1.25vw + 12px);
@media(max-width: 320px) {font-size: 100%;}
@media(min-width: 961px) {font-size: 150%;}
16px～24pxで試した場合は+12pxでちょうどよくなりました。
font-size: calc(2.1875vw + 3px);
@media(max-width: 320px) {font-size: 62.5%;}
@media(min-width: 961px) {font-size: 150%;}
10px～24px遷移の場合、こちらは+3px
最大font-sizeの÷2かと思ったけど+3px…？
全て目分量の調節で割り出したあてずっぽうの値なので、正確には小数点以下の数値が正解なのかもしれません。
本来これはなんらかの式で割り出せるものと思われるのですが、補正値の算出法が分かる方がいらっしゃいましたら是非教えてください。