昔はページのフォントサイズの指定といえば「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; } などと指定して使えばフォントがマトリョーシカ人形状態になることはありませんね。