以前 「YUI Fonts CSS でフォントサイズを相対指定する」 という記事を2008年に書いたんだけど、
6年後(!!)の現在はremで指定しているのでそれについてメモっておく。
rem(root + em = rem)というのは単位のことで、ルート(=html)を基準に相対指定ができる。
YUI Fonts CSSなどのemや%を用いる相対指定との最大の違いは、指定が入れ子になっても親のサイズに影響を受けないという所で、それが最大のメリットでもある。
対応状況は、モダンブラウザならほぼおkという感じだけど一部注意が必要。
- IE9＆10はfontショートハンドおよび疑似要素で未対応
- IE9&10&11は疑似要素のline-heightで未対応
- Chromeはborder-sizeでremを使用すると拡大したときに線が消える
プリプロセッサを常用してるので、remの設定部分もほぼ使い回してます。
以下はその設定部分の抜粋です。
Sass
Styls
StylusでSassのような計算式を書くとJavaScriptの小数点計算の悪癖がそのまま出ることがあるんで、ceilやroundで丸めといた方が良い。