かじこの備忘録

rem

今までフォントサイズには「px」「em」「%」などを使うのが一般的でしたが、「rem」という新しい単位が、CSS3から利用できるようになり、非常に便利になりました。
「rem」とは「root」+「em」の意味で、「ルート要素（htmlに指定）の値」を基準にした相対的なフォントサイズを指定します。
従来の「em」や「%」などの相対指定と違って、親要素の値を継承しないので、子要素が全ての親要素を複利的に継承して、どんどん拡大・縮小されてしまうこともなく、細かい計算が不要になります。
常にルート要素に対してのみ相対的なサイズを指定できるので、非常にわかりやすく便利です。

とhtml指定すると

1.6rem = 16px
2.6rem = 26px

のように表示できるようになります。
ただしCSS3のみですので、未対応ブラウザに対しては、「px」で最初に指定し、その次に「rem」で指定しておくとよいです。

こんな感じ。

【参考】他の値

pt(ポイント)：1pt=1/72in
in(インチ)：1in=2.54cm
pc(パイカ)：1pc=12pt
px(ピクセル)：画素に対する倍率
em：フォントサイズを1とする単位。bodyなどでfont-sizeの指定がないとき、または100％なら1em=16px。
ex：アルファベット小文字「x」を1とする単位
%(パーセント)：標準フォントサイズの相対割合