CSS における rem と em の主な違いは何ですか?

CSS: Rem と Em の違い

CSS では、開発者はさまざまな単位を使用してテキスト要素のサイズを定義することがよくあります。よく使用される 2 つの単位は、rem と em です。両方の単位は似ていますが、決定的な点で異なります。

レム単位を理解する

ルート em の略であるレム単位は、ルート フォントに相対的です。ウェブサイトのサイズ。これは、中間コンテナ内のフォント サイズの変更に関係なく、rem を使用する要素のサイズが一定のままであることを意味します。

Em 単位を理解する

rem とは対照的に、 em 単位は、親要素のフォント サイズに相対的です。親要素のフォント サイズが変更されると、em を使用する要素のサイズもそれに応じて調整されます。

デモ

次の CSS コード:

div {
    font-size: 1.4rem;
}

div p {
    font-size: 1.4rem;
}

div 要素には 1.4rem のフォント サイズが割り当てられ、div 内の p 要素にも 1.4rem のフォント サイズが割り当てられます。 div 要素のフォント サイズを大きくした場合、p 要素のフォント サイズは変更されません。これは、ルート フォント サイズに相対的な rem を使用して定義されているためです。

逆に、 rem の代わりに em を使用すると、div 要素のフォント サイズを大きくすると、p 要素のフォント サイズも大きくなります。これは、em が親要素のフォント サイズに相対的なためです。

以上がCSS における rem と em の主な違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。