CSS における px、em、rem、pt の特徴、違い、変換について詳しく説明します。

コンセプト紹介：

1. px (ピクセル):仮想的な長さの単位で、コンピュータ システムのデジタル画像の長さの単位です。px を物理的な長さに変換する場合は、精度 DPI (Dots Per Inch) を指定する必要があります。DPI は、スキャンや印刷の場合には通常オプションです。 Windows のデフォルトは 96dpi、Apple のデフォルトは 72dpi です。

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

3. pt (ポイント):長さの物理的な単位で、1 インチの 72 分の 1 を表します。 pt=1/72(インチ)、px=1/dpi(インチ)

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

1. emとpxの問題

pxとは何ですか?

px ピクセル。長さの相対単位。ピクセル px はディスプレイ画面の解像度に相対します。 (CSS 2.0 マニュアルより引用)

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

PXの特徴

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

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

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

それは何ですか？

em はフォントの高さを指し、どのブラウザでもデフォルトのフォントの高さは 16 ピクセルです。したがって、調整されていないすべてのブラウザは、1em=16px に準拠します。すると、12px=0.75em、10px=0.625em になります。フォント サイズの変換を簡素化するには、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 { フォントサイズ: 62.5%; }

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

html { フォントサイズ: 63%; }

中国語の記事では、段落の先頭に通常 2 つのスペースがあります。単位として px を使用する場合、12px のフォントには 24px のスペースが必要であり、14px のフォントには 28px のスペースが必要です...この変換は普遍的ではありません。 em 単位を使用すると、この問題は簡単に解決できます。1 文字のサイズは 1em、2 文字のサイズは 2em です。したがって、次のように定義します。

p { テキストインデント: 2em; }

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

フォントの単位は px ではなく em にする必要があります。その理由は、IE6 でフォントのスケーリングをサポートするためです。ページ上で Ctrl キーを押しながらスクロール ホイールを押すと、px フォントの Web サイトは応答しません。 px は絶対単位であり、IE のスケーリングをサポートしていませんが、em は相対単位です。
このブログを調整していたところ、フォントだけでなく、行間（line-height）と垂直の高さの単位も em にする必要があることがわかりました。スケーリング時に整合性を確保します。

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

em 書き換え手順:

1. body セレクターで Font-size=62.5% を宣言します。
2. 元の px 値を 10 で割り、単位として em を使用します。
簡単ですよね？上記の2つの手順だけで問題が解決できるのであれば、誰もpxを使用しません。上記の 2 つの手順を実行すると、Web サイトのフォントが想像よりも大きくなることがわかります。 em の値は固定されておらず、親要素のサイズを継承するため、コンテンツ div のフォント サイズを 1.2em (12 px) に設定できます。次に、セレクター p のフォント サイズを 1.2em に設定しますが、p がコンテンツの子である場合、p のフォント サイズは 12px ではなく、1.2em = 1.2 * 12px = 14.4px になります。これは、コンテンツのフォント サイズが 1.2em に設定されているためです。この em 値は、親要素本体のサイズ (16px * 62.5% * 1.2 = 12px) を継承します。p は子であるため、em はコンテンツのフォントの高さ (12px) を継承します。したがって、1.2em の p は 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はCSS3で新たに追加された相対単位（root em）であり、広く注目を集めています。このユニットはemとどう違うのですか?違いは、 rem を使用して要素のフォント サイズを設定する場合、相対サイズのままですが、HTML ルート要素に対してのみ相対的であるということです。このユニットは、相対サイズと絶対サイズの利点を組み合わせたものです。ルート要素のみを変更すると、レイヤーごとにフォント サイズが複合される連鎖反応を回避しながら、すべてのフォント サイズを比例的に調整できます。現在、IE8 以前を除くすべてのブラウザが rem をサポートしています。サポートされていないブラウザの場合、解決策も非常に簡単で、絶対単位の追加宣言を記述するだけです。これらのブラウザは、rem で設定されたフォント サイズを無視します。

例：

p {フォントサイズ:14px; フォントサイズ:.875rem;}

知らせ：

選択するフォント単位は、主にプロジェクトによって異なります。ユーザー ベースが最新のブラウザーを使用している場合は、rem を使用することをお勧めします。互換性が懸念される場合は、px を使用するか、両方を使用します。

3. フォント変換表

CSS の px、em、rem、pt の特徴、違い、変換の詳細についての記事はこれで終わりです。CSS の px と em に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。