CSSのpx、em、remの違いまとめ

前書き

em と rem は柔軟で拡張可能な単位であり、デザイン内のフォント サイズに応じてブラウザによってピクセル値に変換されます。値 1em または 1rem が使用されている場合、ブラウザによって 16px から変換できます。 160px またはその他の値に設定します。ブラウザは 1px を使用するため、1px は常に正確に 1px として表示されます。

emとremの類似点

em単位とrem単位を使用すると、デザインがより柔軟になり、固定サイズではなく要素全体の拡大と縮小を制御できます

emとremの違い

違いはブラウザです誰がピクセル値に変換するかによって異なります

レム単位がピクセル値に変換される方法

レム単位を使用する場合、ピクセルに変換されるサイズは、フォントであるページのルート要素のフォントサイズによって異なりますHTML要素のサイズ。 ルート要素のフォント サイズは、rem 値で乗算されます。

たとえば、ルート要素のフォント サイズが 16px の場合、10rem は 160px、つまり 10 x 16 = 160 に相当します。

em 単位がピクセル値に変換される方法

em 単位を使用する場合、ピクセル値は、em 単位を使用する要素のフォント サイズを em 値に乗算した値になります。たとえば、p のフォント サイズが 18px の場合、10em は 180px、つまり 10 × 18 = 180 に相当します。

理解すべき重要なポイント:

em 単位が親要素に対する相対的なフォント サイズであるという誤解がよくあります。 実際、W3 標準によれば、これらは em 単位を使用した要素のフォント サイズに相対的です。親要素のフォント サイズは em 値に影響を与える可能性がありますが、これは純粋に継承が原因で発生します。 その理由と仕組みを見てみましょう。

知っておくべきこと:

ルート HTML 要素は、固定値が明示的にオーバーライドされるように設定されていない限り、ブラウザーで設定されたフォント サイズを継承します。したがって、html 要素のフォント サイズは rem 値によって直接決定されますが、フォント サイズは最初にブラウザの設定から取得される場合があります。したがって、ブラウザのフォント サイズ設定は、rem 単位を使用するすべての値、および em 単位を介して継承されるすべての値に影響を与える可能性があります。

em の概要

上記のすべてをまとめると、次のようになります:

1. ピクセル値に変換される rem 単位は、HTML 要素のフォント サイズによって決まります。 このフォント サイズは、特定の単位が明示的にオーバーライドされない限り、ブラウザのフォント サイズ設定の影響を受けます。

2. em 単位は、使用しているフォント サイズに応じてピクセル値に変換されます。 このフォント サイズは、特定の単位で明示的にオーバーライドされない限り、親要素から継承されたフォント サイズによって制御されます。

レム単位を使用する理由:

レム単位は最大のパワーを提供します。それは、継承ではなく一貫したサイズを提供するだけではありません。 代わりに、固定ピクセル単位を使用する代わりに、Web サイト上のどこでも rem を使用してユーザーの好みを取得し、要素のサイズに影響を与える方法を提供します。
このため、rem 単位を使用する主な目的は、ユーザーがブラウザーをどのように設定しても、レイアウトが適切なサイズにサイズ変更されるようにすることです。

em 単位を使用する理由

em 単位は、HTML 要素のフォント サイズではなく、フォント サイズの値に依存します。

この目的のために、em ユニットの主な目的は、特定の設計要素の範囲内に留まる拡張性を可能にすることである必要があります。

たとえば、em 値を使用して、ナビゲーション メニュー項目のパディング、マージン、行の高さ、その他の値を設定できます。フォント サイズ 0.9rem のメニュー

このように、メニューのフォント サイズを変更すると、メニュー項目の周囲の間隔が残りのスペースに比例して拡大されます。

概要

• rem 単位と em 単位は、デザインのフォント サイズに基づいてブラウザによって計算されるピクセル値です。

• em 単位は、それらを使用する要素のフォント サイズに基づきます。

• rem 単位は、HTML 要素のフォント サイズに基づきます。

• em 単位は、継承された親要素のフォント サイズの影響を受ける可能性があります。

• rem 単位は、ブラウザのフォント設定からフォント サイズを継承する可能性があります。

• em 単位の使用は、ルート要素のフォント サイズではなく、コンポーネントのフォント サイズに基づく必要があります。

• em単位を使用する必要がなく、ブラウザのフォントサイズに応じてスケーリングを設定する必要がある場合は、remを使用してください。

• フォント サイズなど、em 単位が必要であることが確実でない限り、rem 単位を使用してください。

• メディアクエリではrem単位を使用してください

• 複数列レイアウトではemまたはremを使用せず、代わりに%を使用してください。

• 拡大縮小によりレイアウト要素が壊れることが避けられない場合は、em または rem を使用しないでください。

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