CSSのpx単位とem単位の違いを詳しく解説

フォントの定義にはpxを使用し、ブラウザのフォント拡大機能は使用できませんが、ほとんどの海外WebサイトはIEブラウザで使用できます。

原因:

1.IEはフォントサイズをpx単位で調整できません。

2. 外国のほとんどはフォントの単位としてemを使用しています。

pxとemは相対的な長さの単位で、

pxはディスプレイの解像度に対する相対的な単位です。

em は、現在のオブジェクト内のテキストに対する相対的なフォント サイズです。現在のオブジェクト内のテキストのフォント サイズが設定されていない場合、ブラウザのデフォルトのフォント サイズに対する相対的な値になります。

どのブラウザのデフォルトのフォントも 16px で、未設定のブラウザはすべて 1em=16px に準拠しています。すると、12px=0.75em、10px=0.625emとなります。フォントサイズの変換を簡素化するには、CSS の本文セレクターで font-size=62.5% を宣言する必要があります。これにより、em インデックスは 16px*62.5%=10px となり、12px=1.2em、10px=1em となります。 , また、つまり、元の px 値を 10 で割って、それを em 単位に置き換えます。

emには以下の特徴があります:

1. emの値は固定ではありません。

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

そのため、次のことを強調する必要があります:

1. bodyセレクターでfont-size=62.5%を宣言します

2. 元のpx値を10で割って、単位としてemに置き換えます

3. フォント サイズの繰り返しの宣言を避けるために、拡大されたフォントの em 値を再計算します。

注:

上記の方法で得られた12px(1.2em)の漢字は、IEで12pxで直接定義されたフォントサイズと等しくなく、若干大きくなります。

正常に表示するにはボディセレクターで62.5%を63%に変更する必要があります。

その理由は、IE が漢字を処理するときに浮動小数点値の精度が制限されていることが考えられます。

上記は、CSS における px 単位と em 単位の違いを徹底的に理解するためにエディターが紹介したものです。ご質問があれば、メッセージを残してください。エディターが返信します。間に合ったあなた。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

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