HTML px em pt の長さの単位の使用法を理解する-htmlチュートリアル-php.cn

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

一个新手

リリース： 2017-10-24 13:40:03

オリジナル

3208 人が閲覧しました

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 が漢字を処理する場合、浮動小数点値の精度が制限されていることが考えられます。他に説明があるかどうかはわかりません。