229
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

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は一部対応
  • それ以外のブラウザは対応している

Kobito.qvcwUf.png

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

  • 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のバグ対応
.page-header {
  font-size: 2rem;

  • emは親のfont-sizeに相対的で入れ子の時に問題になる
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
229
Help us understand the problem. What are the problem?