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

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

1. IE は px を単位として使用するフォント サイズを調整できません。
2. ほとんどの海外 Web サイトがフォントの単位として em を使用しているため、調整できます。
3. Firefox は px と em を調整できます。 % 上記の中国のネットユーザーは 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% を宣言します。
2. 元の px 値を 10 で除算し、次のように em に置き換えます。単位;
3. 拡大されたフォントの em 値を再計算します。フォント サイズを繰り返し宣言することは避けてください。

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

ただし、12px の中国語文字は例外です。上記の方法で得られる 12px (1.2em) の中国語文字は、IE で 12px で直接定義されたフォント サイズと等しくなく、わずかに大きくなります。この問題は Jorux によって解決されました。ボディセレクターの 62.5% を 63% に変更するだけで正常に表示されます。その理由は、IE が漢字を処理する場合、浮動小数点値の精度が制限されていることが考えられます。他に説明があるかどうかはわかりません。