レスポンシブフォントサイズ）解像度の異なるスマホで同じ見た目にする

導入

（レスポンシブを含む）スマホサイトのフォントサイズの指定は

• どのスマホで見てもフォントサイズが同じ
• 画面の横幅の○%と指定する

と二種類に分かれています。どう違うかというと

• フォントサイズ固定→小さいスマホで見て文字が潰れない。　一行に何文字表示されるかはスマホによって可変
• 横幅の○%指定　→スマホの解像度によってフォントサイズが可変。一行に何文字表示されるかはどのスマホで見ても変わらない

Yahooのスマホサイト等では地の文はどのスマホで見てもフォントサイズ16pxで固定のようで世間的には固定サイズが一般的です。
ただ、プロに仕事が回ってくるような複雑なデザインのサイトだとどのスマホで見ても見た目を同じにしたいときが多くあります。

やってみた

https://jsfiddle.net/sphenisc/uov5y2kt/9/
（横幅を変えやすいのでJSFiddleにしました）
よくある3カラムデザインです。

要点

@function fz($size) {
    @return ($size/16) + rem;
}
:root {
  @include mq_sp {
    font-size: 4.26666666667vw !important;
  }
}
html,
body {
  font-size: fz(16);
}
h3 {
  font-size: fz(20);
}

h3のフォントサイズは1.25remなので
PCとタブレット：16 × 1.25 = 20px
スマホ　　：4.26vw × 1.25 = 5.325vw

pのフォントサイズは指定していないので
PCとタブレット：16px
スマホ　　：4.26vw
となります。

フォントサイズを％指定(vw)したことで414pxのスマホで見ても320pxのスマホで見てもpタグの文字は「あ～て」が1行目に表示されます。
注目してほしいのはpにスマホ時のフォントサイズを何も書いていないのでPC用のコードがそのまま適用されているのですが
SPのみルートのフォントサイズをvwにして関数でルートに比べてどのくらいのフォントサイズなのかを関数で指定しているので何も書かなくても勝手にvwに変換してくれています