HTML5のpxとemの違いは何ですか

違い: 1. 単位の長さが異なります、px はデジタル画像の長さの単位、em は文字幅の倍数です; 2. 相対オブジェクトが異なります、px はモニター画面を基準としています解像度、および em は表示画面の解像度に関連しており、現在のオブジェクト内のテキストのフォント サイズです。 3. px の値は固定されており、指定したものになるため、計算が簡単になりますが、em の値は固定されておらず、em は親要素のフォント サイズを継承します。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

PX

px ピクセル (ピクセル)。ピクセル px はモニター画面の解像度を基準としています。

PX の機能

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

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

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

EM

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

EM の機能

1. em の値は固定されていません;

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

px と em の違い:

1. 単位の長さの違い

px はデジタル画像の長さの単位で、em はデジタル画像の長さの単位です。文字幅の倍数。

2. さまざまな相対オブジェクト

px はモニター画面の解像度に関連し、em は現在のオブジェクト内のテキストのフォント サイズに関連します。

3. さまざまな値

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 に変更するだけです。

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

1. 本文セレクターで 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になりました。

関連する推奨事項:「html ビデオ チュートリアル」

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