CSS の px、em、rem、pt の違いと関連性を比較する

この記事では、CSSにおけるpx、em、rem、ptの特徴、違い、変換を主に紹介し、各サイズ単位が親要素のサイズを継承するかどうか、ブラウザが互換性があるかどうかについても詳しく説明します。

概念の紹介へ:

1. px (ピクセル、ピクセル): は、コンピューター システムのデジタル画像の長さの単位です。px が物理的な長さの単位に変換されます。精度 DPI (1 インチあたりのドット数、1 インチあたりのピクセル数) を指定します。通常、スキャンおよび印刷時に DPI オプションがあります。 Windows システムのデフォルトは 96dpi、Apple システムのデフォルトは 72dpi です。

2. em (現在のオブジェクト内のテキストのフォント サイズに対する相対的な長さの単位): これは相対的な長さの単位であり、元々は文字 M の幅を指すため、em という名前が付けられました。現在は文字幅の倍数を指し、その使用法は 0.8em、1.2em、2em などのパーセンテージに似ています。通常は 1em=16px です。

3. pt (ポイント、ポンド): は長さの物理単位であり、1/72 インチを指します。 pt=1/72 (インチ)、px=1/dpi (インチ)

4. rem (root em、root em): は CSS3 の新しい相対単位であり、広く注目を集めています。このユニットと他のユニットの違いは何ですか?違いは、rem を使用して要素のフォント サイズを設定する場合、相対的なサイズであることには変わりありませんが、HTML ルート要素に対してのみ相対的なサイズであることです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものであると言えます。これにより、ルート要素のみを変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。これをサポートしていないブラウザの場合、解決策は非常に簡単で、追加の絶対単位ステートメントを作成することです。これらのブラウザは、rem で設定されたフォント サイズを無視します。

1. emとpxについての質問

pxとは何ですか?

px ピクセル (ピクセル)。相対的な長さの単位。ピクセル px はモニター画面の解像度を基準としています。 (CSS2.0マニュアルより引用)

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

PXの特徴

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

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

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

em それは何ですか？

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

em の特徴:

1em は、親要素のフォント サイズを継承するため、固定値ではありません。どのブラウザでもデフォルトのフォント サイズは 16 ピクセルです。したがって、12px = 0.75emとなります。実際のアプリケーションでは変換を容易にするため、スタイルは通常次のように設定されます:

html { font-size: 62.5% }

このように、1em = 10px。一般的に使用される 1.2em は理論的には 12px です。ただし、この変換は IE ブラウザでは成立しません。1.2em は 12px よりわずかに大きくなります。解決するには、HTML タグ スタイルの 62.5% を 63% に変更します。つまり、

html { font-size: 63%; }

中国語の記事では、通常、段落の先頭にスペースが 2 つあります。単位として px を使用する場合、12px フォントの場合は 24px を省略する必要があり、14px フォントの場合は 28px を省略する必要があります。この変換は非常に使いにくいです。 em 単位を使用すると、この問題は 1 ワードのサイズが 1em、2 ワードのサイズが 2em として簡単に解決できます。したがって、次のように定義するだけです:

p { text-indent: 2em; }

フォント単位の em と px の違い

フォント単位は px ではなく em にする必要があります。その理由は単純です。 IE6 でフォントを拡大縮小するには、ページ上で Ctrl キーを押しながらスクロール ホイールを押します。フォントがピクセル単位である Web サイトは反応しません。 px は絶対単位であり、IE スケーリングをサポートしません。em は相対単位です。
このブログを調整していたら、フォントだけでなく、行間（行の高さ）や垂直の高さの単位もすべてem単位になっていることに気づきました。スケーリング時の整合性を確保します。

em には次の特性があります:
1. em の値は固定されていません。
2. em は親要素のフォント サイズを継承します。

書き換え手順:

1. body セレクターで Font-size=62.5% を宣言します。
2. 元の px 値を 10 で除算し、単位として em に置き換えます。
問題を解決するには上記の 2 つの手順だけが必要です。問題 そうなると、もう誰も px を使わなくなるかもしれません。上記の 2 つの手順を実行すると、Web サイトのフォント サイズが予想外に大きいことがわかります。 em の値は固定されておらず、親要素のサイズを継承するため、コンテンツ p のフォント サイズを 1.2em (12px) に設定できます。次に、セレクター p のフォント サイズを 1.2em に設定しますが、p がコンテンツの子に属している場合、p のフォント サイズは 12px ではなく、1.2em= 1.2 * 12px=14.4px になります。これは、コンテンツのフォント サイズが 1.2em に設定されているため、この em 値は親要素本体のサイズ (16px * 62.5% * 1.2=12px) を継承し、p はその子であり、em はフォントの高さを継承します。コンテンツ、つまり 12 ピクセルです。したがって、p の 1.2em は 12px ではなく、14.4px になります。
3. 拡大されたフォントの em 値を再計算します。フォント サイズの繰り返し宣言を避けてください。つまり、上記の 1.2 * 1.2 = 1.44 現象を避けてください。たとえば、#content でフォント サイズを 1.2em と宣言した場合、p のフォント サイズを宣言する場合、この em はその em ではなく、フォントを継承するため、1.2em ではなく 1em のみにすることができます。 #contentの高さは1em=12pxになりました。
IE の 12px の漢字:
em 変換が完了すると、上記の方法で得られた 12px (1.2em) の漢字が、IE の 12px で直接定義されたフォント サイズと等しくないという奇妙な現象も発見しました。 、しかし少し大きい。本体セレクターで 62.5% を 63% に変更するだけで正常に表示されます。その理由は、IE が漢字を処理する場合、浮動小数点値の精度が制限されていることが考えられます。この現象は 12px の漢字でのみ発生し、英語には存在しません。解決策は、style.css の 62.5% を 63% に置き換えることです。

2. rem の特徴

rem は CSS3 の新しい相対単位 (root em、root em) であり、広く注目を集めています。このユニットと他のユニットの違いは何ですか?違いは、rem を使用して要素のフォント サイズを設定する場合、相対的なサイズであることには変わりありませんが、HTML ルート要素に対してのみ相対的なサイズであることです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものであると言えます。これにより、ルート要素のみを変更するだけですべてのフォント サイズを比例的に調整でき、レイヤーごとにフォント サイズが複合する連鎖反応を回避できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。これをサポートしていないブラウザの場合、解決策は非常に簡単で、追加の絶対単位ステートメントを作成することです。これらのブラウザは、rem で設定されたフォント サイズを無視します。

例:

p {font-size:14px; font-size:.875rem;}

注:

どのフォント単位を使用するかは、主にプロジェクトによって決まります。最新バージョンのブラウザでは、互換性を考慮する場合は rem を使用するか、両方を同時に使用することをお勧めします。

3. フォント変換表

フォントサイズ	pt	px	em
初号	42pt	56px	3.5em
小春	36pt	48px	午後3時
	34pt	45px	2.75em
	32pt	42px	2.55em
	30pt	40px	2.45em
	29pt	38px	2.35em
	28pt	37px	2.3em
	27pt	36px	2.25em
No.1	26pt	35px	2.2em
	25pt	34px	2.125em
小一	24pt	32px	2em
ナンバー2	22pt	29px	1.8em
	20pt	26px	1.6em
小二	18pt	24px	1.5em
	17pt	23px	1.45em
No.3	16pt	22px	1.4em
小三	15pt	21px	1.3em
	14.5pt	20px	1.25em
No.4	14pt	19px	1.2em
	13.5pt	18px	1.125em
	13pt	17px	1.05em
小四	12pt	16px	1em
	11pt	15px	0.95em
No.5	10.5pt	14px	0.875em
	10pt	13px	0.8em
小五	9pt	12px	0.75em
	8pt	11px	0.7em
No.6	7.5pt	10px	0.625em
	7pt	9px	0.55em
小六	6.5pt	8px	0.5em
七号	5.5pt	7px	0.4375em
ナンバー8	5pt	6px	0.375em

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