HTMLにはどのような測定単位がありますか?

HTMLには3つの測定単位があります。1つ目はpx、単位名はピクセル、2つ目はem、単位名は相対長さ単位、3つ目はpt、単位名はポイント（Point）です、それを分析しますあなたにとってこれら 3 つの単位の機能は何ですか?

ピクセル (px) 単位名は、モニター画面の解像度に対する相対的な長さの単位です。 。現在の

内のテキストのフォントサイズと比較して、それはより海外で使用されます;拡張読み: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% 以上が

(またはカーネル) を使用しています。

px ピクセル (ピクセル)。相対的な長さの単位。ピクセル px はモニター画面の解像度に相対しており、QQ スクリーンショットでも長さと幅の単位として PX が使用されます。 em は長さの相対単位です。現在のオブジェクト内のテキストに対する相対的なフォント サイズ。インライン テキストの現在のフォント サイズが手動で設定されていない場合は、ブラウザのデフォルトのフォント サイズを基準とします。

html単位比較の場合

1. 簡単な例:

Width: 300px 幅は300ピクセル

Width: 300pt 幅は300ポイント

Width: 300em 幅は300 相対長さ

上記では同じ値を設定しています 例異なる単位のテキストの異なる長さを設定して効果を確認します:

CSS コード:

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

HTML コード:

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

em から px への変換

どのブラウザのデフォルトのフォントの高さも 16 ピクセル ( 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 への変換:

任意のブラウザ デフォルトのフォントの高さは 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 に変更するだけです。

具体的な使用時間:

すべての

例:

*{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 長さの値の計算と設定が容易になります。

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

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

推奨Webページ単位

そのため、単位変換エラーを避けるために、Webページ制作単位としてPX(ピクセル)を使用することをお勧めします。

上記では、px em pt の単位と変換方法を紹介しました。現在、長さの単位を使用する場合、px を長さの単位として使用します。ここでは、Web ページのサイズと長さの単位として px (ピクセル) を使用することをお勧めします。これは、ブラウザーのピクセル単位と一致しており、長さのサイズを計算するのにも便利です。

px pt em 単位の概要

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

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

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

ここでは HTML の単位について説明します。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事にご注目ください。

関連記事:

HTMLの