【CSS】remとemの違い

親要素のfont-sizeを基準に文字サイズを指定する単位

remもemも親要素の文字サイズを基準に、文字の大きさを指定する単位です

emは直前の親要素の文字サイズを基準とします。そのため、子要素が多くなるにつれて、文字サイズも変更されていきます。

See the Pen remとemの違い by バイオハックch (@synd1090) on CodePen.

一方、remは「root em」の略であり、ルート要素（HTML文書ならばhtml要素）の文字サイズを1として、倍率を指定します。

See the Pen emとremの違い2 by バイオハックch (@synd1090) on CodePen.

htmlのfont-sizeは10pxに指定すると計算しやすい

一般的には、remを使用する際にはhtml要素のフォントサイズは%指定されます。ユーザーがブラウザの設定でデフォルトの文字サイズを変更していた場合でも、ある程度、その設定を反映することができるようにするためです。

普通は計算しやすいよう、htmlのフォントサイズは10px(62.5%)に合わせます。ブラウザのデフォルトのフォントサイズが16pxなので、その62.5%が10pxになります。

html{
  font-size:62.5%;
}