CSS pxとemとremの違い(長さの単位)

01. px

・ディスプレイの1ピクセルを1とする(px)

02. em

・要素にあるfont-sizeの値を1とする(em)

03. px

・ルート要素のfont-sizeの値を1とする(rem)

ディスプレイの1ピクセルを1とする(px)

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

ディスプレイの解像度が1920*1080の場合、横は1920ピクセル、縦は1080ピクセルです。

その1ピクセルをCSSの1pxとする単位です。

実際の1ピクセルの大きさは、ディスプレイの解像度によって変わります。
1920*1080の1ピクセルと1024×768の1ピクセルの物理的な大きさは異なります。
1024×768の方が大きいです。

pxを使用したサンプルです。

<style>
  #p1 {
    font-size: 16px;
  }
  #p2 {
    font-size: 24px;
  }
</style>

<p id="p1">赤</p>
<p id="p2">赤</p>

以下のイメージになります。

要素にあるfont-sizeの値を1とする(em)

要素にあるfont-sizeの値を1とする単位です。

要素にfont-sizeの指定があり、1.2emとした場合、指定のfont-sizeの1.2倍になります。

要素にfont-sizeがない場合は、親要素を見に行きます。

親要素にもfont-sizeの指定がない場合は、ブラウザのデフォルトのfont-size(16px)が基準になります。

emを使用したサンプルです。

<style>
  #p1 {
    font-size: 16px;
  }
  #s1 {
    font-size: 1.5em; /* 24px; */
  }
  #p2 {
    font-size: 16px;
  }
  #s2 {
    font-size: 2em; /* 32px; */
  }
</style>

<p id="p1">赤<span id="s1">青</span></p>
<p id="p2">赤<span id="s2">青</span></p>

6行目は、1.5emです。16*1.5=24pxになります。
12行目は、2emです。16*2=32pxです。

以下のイメージになります。

ルート要素のfont-sizeの値を1とする(rem)

ルート要素(=HTML要素、<html>タグ)のfont-sizeの値を1とする単位です。

remは、root emの略です。

remを使用したサンプルです。

<style>
  html {
    font-size: 20px;
  }
  #p1 {
    font-size: 1rem; /* 20px; */
  }
  #p2 {
    font-size: 1.5em; /* 30px; */
  }
</style>

<p id="p1">赤</p>
<p id="p2">赤</p>

6行目は、1remです。20*1=20pxになります。
9行目は、1.5remです。20*1.5=30pxです。

以下のイメージになります。