pxとemの間の変換

多くの Web デザイナーは、CSS を記述するときにユニバーサル セレクターでフォント サイズを設定します。中国語の場合、通常は 12px です。ただし、IEブラウザではpxを単位としたフォントサイズの調整はできません。実際、単位として em を使用すると、この状況を回避できます。

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

2. Firefox は px と em を調整できます。

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

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

2. emの特徴:
1. emの値は固定されていません。

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

3. em と px を変換する方法
どのブラウザでもデフォルトのフォントの高さは 16px です。変更されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625emとなります。

font-size の変換を簡素化するには、CSS の body セレクターまたはユニバーサル セレクターでグローバルに Font-size=62.5% を宣言する必要があります。多くの初心者はここで 0.625em を定義するか、これを直接定義します。効果はありません。font-size=62.5% を定義する必要があります。

これにより、em 値が 16px*62.5%=10px に変更されるため、12px=1.2em、10px=1em、つまり、元の px 値を 10 で割って、em に変更するだけで済みます。ユニット。 。

4. CSS で em を適用する場合は、次の 2 つの点に注意する必要があります。
1. body セレクターで Font-size=62.5% を宣言します。

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

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

4. em は親要素の特性を継承できるため、1.2 * 1.2= 1.44 の現象が回避されます。たとえば、#content (親要素) でフォント サイズを 1.2em と宣言した場合、p (子要素) のフォント サイズを宣言するときは、この em は 1.2em ではなく 1em のみにできます。もう一方のemは#contentのフォント高さを引き継ぐため、1em=12pxとなります。

さらに、IE が中国語の文字を処理する場合、本文の下に 62.5% で表示される 12px フォントは、直接定義されたものよりも大きいことに注意する必要があります。 62.5% を 63% に置き換えます。 CSS コードに対する上記の調整により、Web サイトがユーザー エクスペリエンス デザインに一歩近づいていることがわかります。