css_html/css_WEB-ITnoseのpx、em、rem単位の違いを徹底理解

ほとんどの国内デザイナーは px を使用することを好みますが、海外のウェブサイトのほとんどは em と rem を使用することを好みます。では、これら 3 つの違いは何で、それぞれの長所と短所は何でしょうか?

PX の特徴

1. IE は px を単位として使用するフォント サイズを調整できません。 px、em、rem を調整できますが、中国のネットユーザーの 96% 以上が IE ブラウザ (またはカーネル) を使用しています。

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

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

どのブラウザのデフォルトのフォント高さも16pxです。変更されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625emとなります。 font-size の変換を簡略化するには、CSS の body セレクターで Font-size=62.5% を宣言する必要があります。これにより、em 値は 16px*62.5%=10px となり、12px=1.2em、10px=1em となります。 , また、つまり、元の px 値を 10 で割って、単位を em に変更するだけです。

EM の機能

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

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

したがって、CSS を記述するときは、次の 2 つの点に注意する必要があります:

1. body セレクターで Font-size=62.5% を宣言します。 em を単位として、

3. 拡大されたフォントの 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 ;}

注:

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

ここでは、px、em、rem 単位変換ツールを提供します

アドレス: http://pxtoem.com/