CSS 長さの単位(px/em/rem/%/vw/vh)

  #p1 {
    font-size: 16px;
  }

ディスプレイは物理ピクセルの集まりでできています。

解像度が1920×1080の場合、横に1920個、縦に1080個の物理ピクセルがあります。

CSSで使われるpxは物理ピクセルそのものではなく、表示上の大きさを一定に保つためのCSSピクセル（論理ピクセル）です。

そのため、高解像度ディスプレイではCSSの1pxが複数の物理ピクセルで描画されることがあります。

同じ物理サイズのディスプレイであれば、解像度が低いほど1物理ピクセルは大きくなります。

→1920*1080の1ピクセルと1024×768の1ピクセルは、1024×768の方が大きい

①font-sizeに使う場合

親要素のfont-sizeが基準になります。

  body {
    font-size: 16px;
  }
   div {
    font-size: 1.5em;  /* 16 × 1.5 = 24px */
  }

1.5emで1.5倍にします。

②それ以外（margin/padding/widthなど）

自分自身のfont-sizeが基準になります。

div {
  font-size: 20px;
  padding: 1em;  /* 20px */
}

ネストすると文字が巨大化するので注意が必要です。

親：20px
子：20×1.2em=24px
孫：24×1.2em=28.8px

使うポイント

①文字の大きさに連動させたい「余白」

ボタンのデザインで文字を大きくしたときに、ボタン内の余白（padding）も自動で広がってほしい時

.button {
  font-size: 1.2rem; /* 基本サイズ */
  padding: 0.5em 1em; /* 文字の半分を上下に、1文字分を左右に */
}

② 文章内の小さな装飾

見出しの横にある小さなアイコンや、行間（line-height）の設定など、文字の高さと常にセットで考えたい時

常にhtml要素のfont-sizeを基準にする相対単位です。

html {
  font-size: 16px;
}
p {
  font-size: 1.5rem; /* 24px */
}

1.5remで1.5倍にします。
emと違いネストしても基準は変わりません。予測でき調整しやすいです。

.parent {
  width: 400px;
  border: 2px solid #333;
}
.child {
  width: 50%; /* 400px * 50% = 200px */
  background: #8fd3f4;
}

6行目のwidthの%は、2行目の親のwidthが基準になります。

Viewport Width（ビューポート・ウィズ）の略です。
親ではなく画面基準になります。

.box {
  width: 50vw;
  height: 100px;
  background: #8fd3f4;
}

画面幅が1000pxで50vwを指定した時 = 500pxになる

1vw = 画面幅の1%

ブラウザ幅を変えると自動で伸び縮みします。

Viewport Height（ビューポート・ハイト）の略です。
親ではなく画面基準になります。

.box {
  width: 200px;
  height: 50vh;
  background: #ffd6a5;
}

画面高さが800pxで50vhを指定した時 = 400px

高さが常に画面の半分になります。

1vh = 画面高さの1%