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