CSSでのpx、em、remの使い方を詳しく解説

すべてのフロントエンドエンジニアはこの経験があると思いますが、ほとんどの国内デザイナーは px を使用することを好みますが、ほとんどの海外 Web サイトは em と rem を使用することを好みます。次の記事では、css の px、em、rem の違いについてエディターが詳しく説明します。必要な方は参考にしてください。

はじめに

em と rem は柔軟でスケーラブルな単位で、デザイン内のフォント サイズに応じてブラウザによってピクセル値に変換されます。値 1em または 1rem が使用されている場合は、ブラウザによって変換できます。 16 ピクセルから 160 ピクセル、またはその他の値。ブラウザは 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 要素のフォント サイズではなく、font-size 値に依存します。

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

たとえば、em 値を使用して、navigation メニュー項目のパディング、margin、line-height などを設定できます。フォント サイズ 0.9rem のメニュー

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

CSS がブラウザのデフォルト スタイルを処理する方法

CSSは矢印プロセスを備えた目に見える進行状況バーを実装します

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