CSS3のpx,%,em,remの使い方

CSSではフォントのサイズをpx,%,em,remで指定した際のそれぞれの意味を解説します。

CSSにはフォントのサイズなどを指定する方法に4つの単位（px,%,em,rem）が存在します。

サイズをpx単位で指定する方法です。

当然、それぞれは指定した値（px単位）で表示されます。

html {
  font-size: 16px;
}
div {
  font-size: 32px; /* -> 64px; */
}
span {
  font-size: 20px; /* -> 20px; */
}

emは親要素に指定されているfont-sizeを基準に大きさを計算します。

値は親要素指定されている「font-size × emで指定された値」になります。

html {
  font-size: 32px;
}
div {
  font-size: 2em; /* -> 64px; */
}
span {
  font-size: 0.5em; /* -> 32px; */
}

%は親要素に指定されているfont-sizeを基準に大きさを計算します。

値は「親要素指定されているfont-size × %で指定された値）になります。

html {
  font-size: 32px;
}

div {
  font-size: 200%; /* -> 64px; */
}

span {
  font-size: 50%; /* -> 32px; */
}

文書のルート要素（html要素のfont-size）を基準にして計算します。

値は「文書のルート要素のfont-size × remで指定された値」になります。

html {
  font-size: 32px;
}

div {
  font-size: 2rem; /* -> 64px; */
}

span {
  font-size: 0.5rem; /* -> 16px; */
}