Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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に相対的で入れ子の時に問題になる
masarufuruya
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系のフリーランスエンジニア。React Nativeとサーバーレスアーキテクチャがマイブーム。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした