CSSのpx単位とem単位の違い

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

キーポイント:

1. 以前は、IE は px を単位としてフォント サイズを調整できませんでしたが、現在はほぼすべての IE がサポートしています。 2. ほとんどの海外 Web サイトが調整できる理由は、フォント単位として em を使用しているためです。

3. 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には次の特徴があります:

1. em の値は固定されていません; 2. em は親要素のフォント サイズを継承します。

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

1.本文セレクターで Font-size=62.5% を宣言します。 2. 元の px 値を 10 で割り、単位として em に置き換えます。

3. それらの拡大されたフォントの em 値を再計算します。フォント サイズの繰り返しの宣言は避けてください。

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

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

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