CSSのremとemの違いは何ですか?-CSSチュートリアル-php.cn

What is the difference between rem and em in CSS?

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>

ログイン後にコピー

のフォントサイズ。要素は、基本フォントサイズに対して 1.4rem に設定されます。

内の要素のフォントサイズも 1.4rem ですが、これは

のフォントサイズ (1.4 * 16px) に相対的なものです。

のフォントサイズを変更すると、

のフォントサイズを 20px にします。要素は 1.4 * 20px として計算されるため、28px に増加します。ただし、

は要素のフォントサイズは、基本フォントサイズを基準にしており、

のフォントサイズの変更の影響を受けないため、22.4 ピクセルのままになります。

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

ソース：php.cn

前の記事：CSSでスクロールバーを除いたビューポート幅(vw)を計算する方法は? 次の記事：CSSで表のセルの幅を均等にする方法は?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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