* bodyのフォントサイズを62.5%にする [#rb85eaae]
** なぜ62.5%にするのか? [#xdf1bc04]
- HTMLソース内でem(もしくはrem)を使ったサイズ指定を分かりやすくするため。
- 既定のフォントサイズ16pxなので、1em = 16pxだが、例えば20pxのマージンを取ろうと思っても計算(20px = 1.25em)が面倒。
- そこで、body(もしくはhtml)のフォントサイズを62.5%にすると、16px x 62.5% = 10px となり、
- 20pxのマージンを指定するのには2em(もしくは2rem)にすればよいことになり、計算が簡単になる。
** 問題点 [#ed271872]
- Chromeで最小フォントサイズを指定していると、そちらが優先される。例えば最小フォントサイズが12pxなら、62.5%を指定しても10pxでなく12pxにり、以後は1em = 12pxとして処理される。
- また、IE/EdgeのClearTypeフォントでは62.5%を指定しても10pxでなく9.93pxとして計算される。したがって、100emなど大きな値を指定する場合、他のブラウザとの誤差が無視できなくなる
- おそらくemやremを使ったサイズ指定はフォントなどの値が小さい、もしくはごく小さい誤差なら許容できる箇所でだけ使った方がよい。大きなボックスなどのレイアウト指定でもpxで指定した方がよい。
** 参考 [#zb8564ff]
- https://qiita.com/YaQ00/items/dc1a739889cc83544aa0
- https://stackoverflow.com/questions/21207716/get-rid-of-chrome-min-font-size-of-12px-when-using-62-5-and-em-design
- https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/106315/