INDEX
CSSでフォントサイズを「rem」に設定するべき理由
皆さまはCSSでフォントサイズを指定する際にどのような単位を使用していますでしょうか？「px」？「em」？「%」？単位なし？
一昔前ではすべて「px」で統一されていましたね。IE9以降のレガシーブラウザでは「rem」という単位は解釈できないため「rem」をどうしても使用したい場合はIE用のハックを書く必要がありました。
しかし、そこまでの手間をかけて必要かと言われると。。。だったのですべて「px」で記述しておりました。
最近ではIE対応をそこまで気にしなくて良くなってきたので、これからは「rem」を使用していきましょう！では、「rem」について解説していきます。
remとは？
では、remとはどんな単位なのでしょうか？まず単位には「%」のような相対的に指定するものと「pt」のように絶対的に指定するものがあります。
その中で「rem」は「root em」の略でroot要素に対して相対的に指定する単位のことです。
html { font-size: 62.5%; } 10px
body { font-size: 1.6rem; } 16px
p { font-size: 1.6rem; } 16px
li { font-size: 1.6rem; } 16px
li p { font-size: 1.6rem; } 16pxよくあるremの記述は上記のとおりです。emで表記すると直近の親要素の影響を受けるので計算がめんどくさいのです。
更にすごい「vw・vh」
スマホ時代のフォント指定である「vw・vh」があります。
vw・・・viewport width。ビューポートの幅に対する割合。
vh・・・viewport height。ビューポートの高さに対する割合。
こちらは別途詳しく書いていこうかと思います。
ちなみに、ブラウザのデフォルトフォントサイズ
100% = 1em = 1rem = 16px = 12pt
らしいです。指定のフォントによってはメイリオとか丸っこいものだと大きく見えたりするので一概には言えなそうですが