レスポンシブ対応の共通cssのfont-sizeメモ

レスポンシブ対応のサイトにするときのfont-size関連の書き方。

html に基本の倍率を10px として設定し、bodyで全体を14や16pxになるようにします。 この場合は1.4remで14px （ついでによく使うfont-familyとline-heightもメモ）

html {
  font-size: 62.5%; /* 10px */
}

body {
  font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 2;
  font-size: 1.4em; /* 14px */
}

スマホなどはメディアクエリで対応します。 （ブレイクポイントはbootstrap4を参考にしてるけどこれも諸説あり）

@media (max-width: 576px) {
  body {
    font-size: 1.5em; /* スマホは15px */
  }
}