css remとemの違い

css

remもemもブラウザの標準フォントサイズを基準とした単位という意味では同じ。

ただし、emが親要素を基準とするのに対し、remの場合は親に依存せず、あくまでhtmlのサイズを基準とする。

ケース1 em

html{font-size:1em} /* 1em:16px */
body {font-size:2em}
p{font-size:1em}

ケース2 rem

html{font-size:1rem} /* 1rem:16px */
body {font-size:2rem}
p{font-size:1rem}

html

<html>
<body>
<p>aaa</p>
</body>
</html>

ケース1の場合、pのサイズは2em(32px)となり、ケース2の場合は、1rem(16px)となる。bootstrap4はremを採用している。

remのメリットとか。rootを始点とするのでhtmlのフォントサイズ変えれば全体のサイズも調整される。
CSSで知っておきたい、フォントサイズ指定の単位のすべて｜ferret [フェレット]