Media Query の設定

em 指定で Media Query の設定を行った。

各サイズは font-size: 100% ( 16px ) を基に計算される。
コンテンツの横幅には一行40文字入るようにしてる。

• コンテンツの横幅に48文字入るスペース、つまり左右に4文字ずつ入る余白が失われたときは font-size: 100% にする
• 左右に4文字ずつ以上の余白、上下に24文字入るスペースが失われたときは font-size: 112.5% にする
• 左右に24文字ずつ以上の余白、上下に4文字ずつ以上入る余白が確保されたときは font-size: 131.3% にする

html {
  font-size: 100%;
}

@media (min-width: 48em) and (min-height: 24em) {
  html {
    font-size: 112.5%;
  }
}

@media (min-width: 96em) and (min-height: 48em) {
  html {
    font-size: 131.3%;
  }
}