HTML px em pt の長さの単位の使用法を理解する

html px em pt 単位面積

1. PXEMPT ユニットの紹介 - TOP

px ユニット名は ピクセル、相対的な長さの単位で、ピクセル (px) はモニター画面の解像度に対する相対値です。推奨事項;
em単位名は相対長単位です。現在のオブジェクト内のテキストのフォント サイズに比べて、海外で多く使用されます。拡張読み取り: html em タグ、html em 強調タグ
pt単位名はPoint (ポイント)、絶対長単位は通常、テーブルの古いバージョンの長さサイズの単位が使用されますが、現在は基本的に使用されません。

HTML単位の簡単な紹介:

Pxピクセル; 相対的な長さの単位。
Pt ポイント; 絶対的な長さの単位
Em 相対的な長さの単位。em は html タグの「EM」とまったく同じスペルであり、ここでは em は別のテキスト単位として使用されます。

1. 以前は、IE は px を単位として使用してフォント サイズを調整できませんでしたが、現在はほとんどの IE がそれをサポートしており、ほとんどの海外 Web サイトで PX を単位として使用することが推奨されています。調整とは、フォント単位として em を使用することです。

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

px ピクセル (ピクセル)。相対的な長さの単位。ピクセル px はモニター画面の解像度に相対しており、QQ スクリーンショットでも長さと幅の単位として PX が使用されます。

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

2. HTML ユニット比較のケース -

TOP

1. 簡単な例:

幅: 300px 幅は 300 ピクセル Width: 300em 幅は 300 相対長さ
上記の例同じ値に異なる単位を設定する


2. テキストの em px pt 単位に異なる長さを設定して効果を確認します:

CSS コード:

.pcss5-px {
    font-size:12px
}
.pcss5-pt {
    font-size:12pt
}
.pcss5-em {
    font-size:2em
}

HTML コード:

<p class="pcss5-px">
    我是pcss5
</p>
<p class="pcss5-pt">
    我是pcss5
</p>
<p class="pcss5-em">
    我是pcss5
</p>

3. Em と px の変換 -

TOP

どのブラウザでもデフォルトのフォントの高さは 16px (16 ピクセル) です。変更されていないすべてのブラウザは、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 に変更するだけです。

12px は 9pt の長さに相当します;

9pt は 0.75em の長さに相当します

一般的に em を使用して px に変換します
高度な em から px への変換:

どのブラウザでもデフォルトのフォントの高さは 16px (16 ピクセル) です。変更されていないすべてのブラウザは、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 に変更するだけです。

具体的な使用時間:
すべての HTML タグに対して初期の font-size=62.5% を宣言します

例:

*{font-size=62.5%} その後、次の手法に従って後続のレイアウトを設定できますem 単位 font-size: 1.2em は font-size: 12px と等しい
font-size: 1.4em は font-size: 14px と等しい
類推すると、最初の font-size=62.5% の後、em とpx 単位はわずか 10 倍です。ギャップは、em 長さの値の計算と設定を容易にするために使用されます。

4. em ユニットには次の特徴があります: -
TOP

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

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

CSSを記述するときに単位としてemを使用したい場合は、次の2つの点に注意する必要があります:

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

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

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

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

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

5. 推奨される Web ページの単位 - TOP

したがって、単位変換エラーを避けるために、Web ページの制作単位として PX (ピクセル) を使用することをお勧めします。 上記では、px em pt 単位と変換方法を紹介しました。現在使用されている長さの単位は px です。ここでは、

ウェブページのサイズと長さの単位として px (ピクセル) を使用することをお勧めします

。これは、ブラウザーのピクセル単位と一致しており、長さとサイズを計算するのにも便利です。 px pt em 単位の概要 -

TOP

1)、推奨される px ピクセル単位: 通常は px (ピクセル単位) を使用し、次に em 単位を使用します。通常、単位として px を使用することをお勧めします

2 )。 、ディスプレイの解像度は px ピクセルです

3)、QQ のスクリーンショットも px ピクセルです。

以上がHTML px em pt の長さの単位の使用法を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。