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の計算がわかりやすい。