CSS3のremとemの違いについて

CSSのフォントサイズ指定方法は次の2つ

• 絶対値: 10pxなら絶対に10px
• 相対値: 親要素のサイズによって可変

px

• サイズを絶対値で指定

html {
  font-size: 32px;
}

h1 {
  font-size: 64px; /* -> 64px; */
}

span {
  font-size: 20px; /* -> 20px; */
}

em

• 親要素のfont-sizeを基準に大きさを計算する

html {
  font-size: 32px;
}

h1 {
  font-size: 2em; /* -> 64px; */
}

span {
  font-size: 0.5em; /* -> 32px; */
}

%

• emと同じで親要素の相対値

html {
  font-size: 32px;
}

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

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

• 要素が入れ込んでくると、どの親要素を基準にしているかが分かりにくくなる
• そのためCSS3で使えるようになったのが、rem

rem (root em)

• 文書のルート要素、つまりhtml要素のfont-sizeを基準にする

html {
  font-size: 32px;
}

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

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

ブラウザサポートを確認

• Can I Useで確認するとIE8以下は未対応。IE9と10は一部対応
• それ以外のブラウザは対応している

ブラウザのデフォルトサイズ

• 16px

html {
  font-size: 100%; /* -> 16px; */
}

pxだとなぜいけないのか

• ブラウザによって文字の大きさが変わる
• あなたはどれにする？CSSの文字サイズ指定「px、em、%」 – デザインメモ http://blog.karasuneko.com/3092/

よくあるやり方

html {
  font-size: 62.5%; /* -> 10px; */
}

• デフォルトの16pxの代わりに1emが10pxになるように調整

body {
  font-size: 1.4em; /* -> 14px; */
}

• 上の設定により「px」を使用するのに似た感覚でフォントサイズを指定できるようになる
• bodyでemを使うのはChromeのバグ対応
  • Chromeでfont-sizeを相対指定したとき、フォントサイズが大きく表示されることがある - Qiita https://qiita.com/qtach1/items/2a48aa64dbcd820b7d76

.page-header {
  font-size: 2rem;
 

• emは親のfont-sizeに相対的で入れ子の時に問題になる