はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

CSS3 の em と rem の違い

CSS3 の em と rem の違い

em と rem の違いについてメモしておきます。

em と rem の違い

見たほうが早いので、簡単に。

em とは

em とは、親要素の font-sizeが、 font-size: 20px; であれば、 1em親要素から引き続かれ、20pxとなる。

rem とは

一方、rem では、親要素ではなくルート要素から引き継がれる。 ルート要素とは html 要素である。

例えば、 ルート要素が、

html{
font-size: 20px;
}

であれば、 font-size: 1rem; で、20px となる。

rem は、親要素は関係ないので、pxの計算がわかりやすい。

codepen.io