常用単位

以下は、これらの単位の簡単な整理です.
たんい
を選択します.
説明
px(pixel、ピクセル)
Absolute
1つのViewportピクセル、相対長さの単位.画素pxは、ディスプレイ画面解像度に対して.
pt(ポイント、ポンド)
Absolute
1 pt=1/72インチ、物理長単位、72分の1インチ
pc
Absolute
1pc = 12pt
%
Relative
親要素に対するフォントサイズ
em
Relative
親要素のフォントサイズに対して相対的な長さの単位.現在のオブジェクト内のテキストに対するフォントサイズ
rem
Relative
相対長さ単位、すなわちroot emはhtmlラベルのフォントサイズに対して、相対的にHTMLルート要素のみ
keyword
Relative
xx-small, x-small, small, medium, large, x-large, xx-large
vw
Relative
ビューポートの幅に対してViewportの幅の1/100に相当
vh
Relative
ビューポートの高さの1/100に相当します.
vmin
Relative
ビューポートの高さと幅の両方の最小値について
vmax
Relative
ビューポートの高さと幅の両方の最大値について
ここでは主にこれらの単位に注目する:px・pt・%・em・remとvw.

ビューポートとは?

viewportは、ユーザーのWebページの表示領域です.
viewportを中国語に訳すと「視区」と呼ぶことができます.
携帯電話ブラウザは、ページを仮想的な「ウィンドウ」(viewport)に配置し、通常、この仮想的な「ウィンドウ」(viewport)は画面よりも広く、各ページを小さなウィンドウに押し込む必要がなく(携帯電話ブラウザに最適化されていないページのレイアウトを破壊する)、ユーザーはページの異なる部分を平行移動したり拡大したりすることができます.
px(ピクセル)の特徴:

IEはpx単位のフォントサイズを調整できない;

国内のほとんどのサイトが調整できるのは、emまたはremをフォント単位として使用するためである.

Firefoxはpx,em,remを調整できるがieブラウザ(またはカーネル)を使用するユーザが多い.

Emの特徴:

値が固定していない;

親要素のフォントサイズを継承します.

注意:任意のブラウザのデフォルトフォントは16 pxなので、調整されていないすべてのブラウザは1 em=16 pxに一致します.宣言が必要な場合はbodyにfont-size:75%(任意の値)を直接書くことができます.そしてブラウザのデフォルト値は16 px*75%=12 pxになります.つまり1 emは12 pxに等しい.

pxとremの選択?

一部の携帯電話機器を適切に配置するだけで、解像度がページにあまり影響しない場合は、pxを使用します.
様々なモバイルデバイスを適応させる必要がある場合は、remを使用します.例えば、iPhoneやiPadなどの解像度の差が大きいデバイスだけを適応させる必要があります.
注意:どのフォント単位を使用するかは主にあなたのプロジェクトによって決まります.もしあなたのユーザーグループが最新版のブラウザを使用している場合は、remを使用することをお勧めします.互換性を考慮するなら、pxを使用するか、両方を同時に使用します.