CSSでのフォントサイズ指定
pxを使うと、ブラウザを拡大したときとかにどうやら反映されないらしい。
じゃあどうする？
- emを使う
- 親要素のフォントサイズを基準に倍率を指定するため親要素によってはフォントサイズが統一されない。
- remを使う
- Root要素のフォントサイズを基準に倍率を指定するから使いやすい！
remってバグがちらほらあるらしい…
remという単位自体が問題というか、ブラウザが悪い。
表示バグは下記
IEでremが反映されない
IE9以上？（IE8はそもそも対応してない）で :after や :before の疑似要素のline-heightをrem指定すると反映されないらしい。
line-heightはそもそも単位を指定しなければ倍率指定できる。
line-height: 1 とすれば指定した要素のフォントサイズになる。
remを使う必要がないため、問題ない！
Chromeでhtmlに指定したフォントサイズが反映されない
これはChromeで下記のように指定されたものが反映されないらしい。
sample.css
html {
font-size: 62.5%;
}
body {
font-size: 1.4rem;
}
こうすると、通常htmlに指定したパーセント指定font-sizeでブラウザのデフォルトサイズから62.5%された値が設定され、bodyではその1.4倍を使うという指定になっている。
しかし、ChromeだとbodyもRoot要素だと判断されるためか、htmlのfont-sizeが無効になり、デフォルトフォントサイズから1.4倍されるらしい。
回避策
sample.css
html {
font-size: 62.5%;
}
body {
font-size: 1.4em;
}
bodyのfont-sizeの単位をemに変更することで回避できる。
この場合だけ、remではなくemを使う。
さいごに
みなさんもこの機会にremを使ってみてみればいかがでしょう？
（IE8対応はしらない）
結構適当に書いたので明らかに間違ってる所があればご指摘おねがいします…