px、em、remの違いとメリット・デメリットを深く理解する

ページをレイアウトするとき、ボックスの長さ、幅、高さを設定する必要があることがよくあります。では、これらの長さ、幅、高さにはどのような単位が使用されるのでしょうか。実際、国内のデザインマスターは皆 px を使用することを好みますが、海外のウェブサイトのほとんどは em と rem を使用することを好みます。では、px、em、rem の違いは何でしょうか。また、それぞれの長所と短所は何ですか。それぞれ？次にそれを紹介しますので、必要な友達は見てください。

px の機能:

1. IE は px を単位として使用するフォント サイズを調整できません。その理由は、フォント単位として em または rem を使用しているためです。

3. Firefox は px と em、rem を調整できますが、中国のネットユーザーの 96% 以上が IE ブラウザ (またはカーネル) を使用しています。

px ピクセル (ピクセル)。相対的な長さの単位。ピクセル px は、表示画面の解像度を基準としています。 (CSS2.0マニュアルより引用)

emは相対的な長さの単位です。現在のオブジェクト内のテキストに対する相対的なフォント サイズ。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズ (16px) を基準とします。 (CSS2.0マニュアルより引用)

ブラウザのデフォルトのフォント高さは16pxです。すべて未調整のブラウザ豆腐: 1em=16px。すると、10px=0.625pxとなります。 font-size の変換を簡略化するには、css の body セレクターで font-size=62.5% を宣言する必要があります。これにより、em 値は 16px*62.5%=10px となり、10px=1em になります。 、元の値を変更するだけです。px 値を 10 で割って、単位として em に置き換えるだけです。

em の機能:

1.em 値は固定されていません。

2.em は親要素のフォント サイズを継承します。

したがって、CSS を記述するときに、本文セレクターで font-size=62.5% を宣言すると、元の px 値を 10 で除算し、それを単位として em に置き換えて再計算します。フォント サイズの繰り返し宣言を避けるための単位値。

これは、1.2*1.2=1.44 という現象を避けるためです。たとえば、#content でフォント サイズを 1.2em と宣言した場合、p のフォント サイズを宣言するときは、1.2em ではなく 1em のみにすることができます。これは、この em がその em ではなく、非常に可変であるためです。 #content のフォント サイズを継承するためです。1em=12px です。

rem の特徴:

rem は、CSS3 に追加された新しい相対単位 (root em root em) であり、広く注目を集めています。このユニットと他のユニットの違いは何ですか?違いは、rem を使用して要素のフォント サイズを設定する場合、相対的なサイズであることには変わりありませんが、HTML ルート要素に対してのみ相対的なサイズであることです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものであると言えます。これにより、ルート要素のみを変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。これをサポートしていないブラウザの場合、解決策は非常に簡単で、追加の絶対単位ステートメントを作成することです。これらのブラウザは、rem で設定されたフォント サイズを無視します。以下は例です:

p{font-size:14px;font-size:875rem;}

注:

どのフォント単位を使用するかは、主にプロジェクトによって決まります。ユーザーベース全員が最新バージョンのブラウザを使用している場合、それはプロジェクトによって決まります。 rem を使用することをお勧めします。互換性を考慮する場合は px を使用するか、両方を同時に使用します。

ここでは、px、em、rem 単位変換ツールを提供します。アドレス:

http://pxtoem.com/

以上がpx、em、remの違いとメリット・デメリットを深く理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。