CSSのemとpxの違いをご存知ですか？

3大ポータルをはじめ、中国のWebサイトデザインのトレンドを「リード」するBlue Ideal、ChinaUIなどの国内Webサイトはすべてフォント単位としてpxを使用しています。調整可能な例を示しているのは Baidu だけです。海の反対側では、ほとんどすべての主流サイトが、調整可能なフォント単位として em を使用しています。はい、px は em よりも使いやすいですが、ほとんどの読者は em が何なのか、また px がどれくらいなのかを知りません。外国人がウェブサイトのアクセシビリティ（アクセシビリティ）を非常に重視しているのは、その根深い人道的精神のためだけではなく、直接の理由は、ウェブサイトにウェブサイトを強制する米国の第 508 条など、外国人を制限する法律があるためかもしれません。一定レベルのアクセシビリティを達成するため。

重要なポイント:

IE は px を単位として使用するフォント サイズを調整できません。

ほとんどの海外 Web サイトがフォントの単位として em を使用しているため、調整できます。

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

px ピクセル (ピクセル)。相対的な長さの単位。ピクセル px はモニター画面の解像度を基準としています。

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

どのブラウザでもデフォルトのフォントの高さは 16 ピクセルです。変更されていないすべてのブラウザは、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 には次の特性があります:

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

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

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

body セレクターで Font-size=62.5% を宣言します。

元の px 値を 10 で割って、それを em に置き換えます。単位;

拡大されたフォントの 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 が漢字を処理する場合、浮動小数点値の精度が制限されていることが考えられます。他に説明があるかどうかはわかりません。

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