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. フォント変換表

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