昔はページのフォントサイズの指定といえば「px」、その後「em」へと変わりましたが今は「rem」。「rem」は「em」を使った場合の問題を解決するCSS3の新単位。
「em」の問題点
簡単に言うと「px」は文字のサイズの単位、ほぼブラウザの標準サイズは「16px」、「14px」は小さく、「18px」は大きい文字になります。
それに対して「em」は割合、「0.7em」は70%、
p { font-size: 0.7em; } と p { font-size: 70%; } は同じです。何に対して70%なのか、それは親要素。
この親要素と言うのが曲者で入れ子構造になっている要素では、マトリョーシカ人形のようにどんどん小さくなってしまいます。
指定した値は子要素へも継承されるので、意図しない大きさになっちゃったりします、まさに訳が分からなくなる状態。
そこで「rem」
そこで登場したのが「rem」、「rem」も「em」、「%」と同じ割合、大きな違いは何に対してか。
「rem」も「em」が親要素に対して「rem」は「ルート要素の文字サイズ」、つまり元の基準が1個。
html { font-size: 14pt; } ・・・・ この指定がルート要素。 ※bodyでは無い!
指定しない場合は見ているブラウザの標準サイズ(ほとんど16px)。
html要素にフォントサイズを指定して
p { font-size: 0.7rem; } などと指定して使えばフォントがマトリョーシカ人形状態になることはありませんね。
コメント