pt、px、rem、emの違いのまとめ

Summary Difference Between Pt

Ptとpx

HTMLデザインフォントのcssスタイルでは、一部のフォントが14pxではなく14ptに設定されています。 ptとは何ですか？pxとは何の関係がありますか？

Pt（ポイント）は、印刷業界で一般的に使用されている単位で、1/72インチに等しく、絶対長を示します。 Px（pixel）は、データを表示するための画面上の最も基本的なポイントであるピクセルを指し、相対的なサイズを示します。異なる解像度での同じ長さのpx要素の表示は異なります。たとえば、同じ14pxサイズが1366 * 768ディスプレイの下に表示されますが、1024 * 768サイズのディスプレイでは比較的大きくなります。

pxとptの変換ルールは非常に単純です。デフォルトの表示設定では、テキストは96DPIとして定義されています。式px = pt * DPI / 72は、pt = px * 3/4を与えます。

エムとレム

Emは、現在のオブジェクト内のテキストのフォントサイズを基準にした相対的な長さの単位です。つまり、emは親要素のfont-sizeに基づいて計算されます。といった：

My font display size is 28px (14px*2)

I show that the font size is 36px (18px*2) instead of the 28px calculated above

Remは、css3の新しい相対単位です。 emとの違いは、htmlルート要素に関連していることです（bodyタグでのフォントサイズの設定は機能しません）。または、上記の例でremに変更すると、結果は次のようになります。

My font display size is 32px (16px*2), because I calculate it according to the font-size of the html root element

I show that the font size is 32px (16px*2), because I calculate it according to the font-size of the html root element

*追加のデフォルトのフォントサイズサイズは16pxです（htmlで設定されていない場合）。