TL;DR
remは<html>（ルート）要素で使われているフォントサイズを基準とするemは親要素で用いられているフォントサイズを基準とするfont-sizeのブラウザの既定値はmedium（16px）
目次
em
font-size: 1em;を指定した要素は、その親要素で用いられているフォントサイズと同じになる。
<div class="container"> font-size:<span>em</span> </div>
html { font-size: 62.5%; /* ブラウザのデフォルトの設定では、これを設定すると10pxになります。 */ } .container { font-size: 16px; } span { font-size: 2em; }
上記の例ではemのフォントサイズは32pxとなり、font-size:は16pxで表示されます。
html要素にもフォントサイズの指定はありますが、影響していません。
rem
font-size: 1rem;を指定した要素は、html要素で用いられているフォントサイズと同じになる。
<div class="container"> font-size:<span>rem</span> </div>
html { font-size: 62.5%; } .container { font-size: 16px; } span { font-size: 2rem; }
上記の例では、先程のemとは異なり、remの文字はdiv.containerに定義されたフォントサイズに影響されません。
「1remはhtml要素で用いられているフォントサイズと同じになる」ので、
今回の例では2remを指定していますから10×2=20で20pxとなります。
font-size:の文字はdiv.containerで定義されている通り、16pxとなります。
そもそもページ内のどこにもフォントサイズの指定がなかったら
ブラウザ規定のフォントサイズ
デフォルトでは16pxとなっているため、1remも1emも16pxになります。
px
先程の2つ、remとemは他の要素に対して相対的に値が変化していました。
pxに関しては、そういった依存関係が存在しないため、値は「静的」となります。
余談ですが、pxで値を指定すると、ユーザーがブラウザ上でフォントサイズを変更することはできません。
実際に試してみる？
htmlタグとbodyタグにフォントサイズを指定することで、remとemの差を視覚的に見ることができます。
See the Pen font-size: rem, em, px by itsumoonazicode (@itsumoonazicode) on CodePen.
おまけ
largeやsmallって相対値？
フォントサイズには、largeやsmallなど大小を表す単語でも指定できます。
MDNを見ると、それらに関しては以下のような記述があります。
ユーザーの既定のフォントサイズ (つまり medium) を基準とした絶対的なサイズのキーワードです。
基準値となるmediumとはなにもの？
仕様書準拠ではありませんが...
フォントサイズで指定できるmediumはブラウザ既定の値を返すようになっているようです。
先ほどまでの説明でいけば、font-size: medium;を指定した要素のフォントサイズは16pxということになります。
おしまい
