CSSのremとemの違いは何ですか?

CSS での rem と em の区別

CSS では、フォント サイズはさまざまな単位を使用して定義できますが、その中でよく使用されるのは rem と em です。 。どちらの単位も相対的なフォント サイズを設定するという目的を果たしますが、相対的な参照点という重要な点で異なります。

em について理解する

em 単位は相対的なものです。親要素のフォント サイズ。これは、親要素のフォント サイズが 14px の場合、フォント サイズ 1.4em の子要素のフォント サイズは 1.4 * 14px = 19.6px になることを意味します。

rem について

対照的に、rem 単位は基本フォント サイズを基準とします。この基本フォント サイズは通常、 ファイルで設定されます。要素または CSS 変数を介して。基本フォント サイズが 16px に設定されている場合、すべての rem 値はそのサイズを基準にして計算されます。したがって、この例のフォント サイズ 1.4rem の子要素のフォント サイズは 1.4 * 16px = 22.4px になります。

ネストされた要素への影響

この違いは、フォント サイズを変更するネストされたコンテナを扱う場合に重要になります。 ems で定義された子要素は親から変更されたフォント サイズを継承しますが、rems で定義された子要素は基本フォント サイズに対する相対的なサイズを維持します。

Example

提供されたコード スニペット内:

<code class="html"><div>Hello <p>World</p></div></code>

<code class="css">div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}</code>