優れた歴史的背景を提供するためのjosh3736の回答を称賛したいと思います。明確に表現されていますが、この質問が出されてから約5年間でCSSの状況は変化しました。この質問がなされたとき、それは正解px でしたが、今日はもはや当てはまりません。
tl; dr：使用rem
ユニットの概要
歴史的に、px単位は通常、1つのデバイスピクセルを表していました。ピクセル密度がますます高くなるデバイスでは、これはAppleのRetinaディスプレイなどの多くのデバイスには当てはまりません。
rem単位は表し、R OOTの全角サイズを。font-size一致するものは何でも:rootです。HTMLの場合は<html>要素です。SVGの場合は、<svg>要素です。font-sizeすべてのブラウザ* のデフォルトは16pxです。
執筆時点でremは、約98％のユーザーがサポートしています。他の2％が心配な場合は、約98％のユーザーがメディアクエリもサポートしていることを思い出します。
ご利用にあたって px
インターネット上のCSSの例の大部分pxは、事実上の標準であるため、値を使用します。pt、inおよび理論的には他のさまざまな単位を使用することもできますが、小さい値をうまく処理できなかったため、分数にすばやく対応する必要がありました。
であなたは、細い境界線を望んでいた場合px、あなたが使用することができ1pxて、ptあなたが使用する必要があると思い0.75pt一貫した結果のために、それはちょうど非常に便利ではありません。
ご利用にあたって rem
remのデフォルト値は16px、その使用に関してあまり強力な議論ではありません。書き込みが0.0625remあるより悪い書き込みよりも0.75pt、なぜ誰も使用がでしょうかrem？
rem他のユニットと比べての利点には2つの部分があります。
- ユーザーの好みが尊重されます
- の見かけの
px値をrem好きなように変更できます
ユーザー設定の尊重
ブラウザのズームは、長年にわたって大幅に変化しました。歴史的には多くのブラウザはスケールアップするだけでしたがfont-size、誰かがズームインまたはズームアウトすると、ピクセルパーフェクトな美しいデザインが機能しなくなったことにWebサイトが気づいたとき、それは急速に変化しました。この時点で、ブラウザはページ全体を拡大縮小しているため、フォントベースのズームは画面外にあります。
ユーザーの希望を尊重することは、視野の外ではありません。ブラウザーが16pxデフォルトで設定されているからといって、ユーザーが好みを変更し24pxたり32px、低視力や視界不良（画面の眩しさなど）を修正したりできないということではありません。に基づいてユニットを作成するとrem、フォントサイズが大きいユーザーには比例して大きいサイトが表示されます。ボーダーが大きくなり、パディングが大きくなり、マージンが大きくなり、すべてがスムーズに拡大されます。
メディアクエリをに基づいているrem場合は、ユーザーに表示されるサイトが画面に適合していることを確認することもできます。ワイドブラウザでにfont-size設定さ32pxれ640pxたユーザーは16px、320pxワイドブラウザでユーザーに表示されるようにサイトを効果的に表示します。RWDを使用しても損失はまったくありませんrem。
見かけのpx価値の変化
はノードのにrem基づいているため、何を表すかを変更したい場合font-sizeは、以下:rootを変更するだけです。1remfont-size
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
何をする場合でも、:root要素の値font-sizeを設定しないでくださいpx。
font-sizeon htmlにpx値を設定すると、ユーザーの設定を取り戻す方法なしにユーザーの設定を吹き飛ばしてしまいます。
の見かけの値を変更する場合はrem、%単位を使用します。
この計算はかなり簡単です。
の見かけのフォントサイズは:rootですが16px、に変更したいとし20pxます。必要なのは16、取得する値を乗算することだけ20です。
方程式を設定します。
16 * X = 20
そしてのために解決するX：
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
の倍数ですべてを行うこと20はそれほど素晴らしいことではありませんが、一般的な提案は、見かけのサイズをにrem等しくすること10pxです。そのためのマジックナンバー10/16は0.625、または62.5%です。
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
問題は、今、あなたのデフォルトということですfont-sizeページの残りの部分については、集合あまりにも小さいですが、それを修正する簡単な方法があります：セットA font-sizeのbody使用はrem：
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
この調整が適切に行われている場合、の見かけの値はremで10pxあることに注意することが重要です。つまり、書き込んだ値は、小数点以下をバンプするpxことで直接変換できますrem。
padding: 20px;
になる
padding: 2rem;
選択する見かけのフォントサイズはあなた次第なので、もしあなたが望むなら、あなたが使用できない理由はありません：
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
と1rem等しい1px。
CSSが複雑になりすぎないようにしながら、ユーザーの希望を尊重するための簡単な解決策があります。
待って、キャッチは何ですか？
あなたはそれを尋ねるのではないかと心配でした。それremが魔法であり、すべてを解決するふりをしたいのと同じくらい、まだいくつかの注目すべき問題があります。私の意見では何の問題もありませんが、私はあなたに警告しなかったとは言えないので、それらを呼び出します。
メディアクエリ（を使用em）
最初に遭遇する問題の1つremはメディアクエリです。次のコードを検討してください。
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
ここで、remメディアクエリが適用されるかどうかに応じて値が変化し、メディアクエリがの値に依存するremため、いったい何が起こっているのでしょうか。
remメディアクエリでは、の初期値を使用し、要素のに発生した可能性のある変更を考慮に入れてはfont-sizeなりません（Safariセクションを参照）。つまり、見かけ上の値は常にです。font-size:root 16px
これは、いくつかの分数計算を行う必要があることを意味するので、少し煩わしいですが、ほとんどの一般的なメディアクエリは、16の倍数の値を既に使用していることがわかりました。
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
さらに、CSSプリプロセッサを使用している場合は、ミックスインまたは変数を使用してメディアクエリを管理できます。これにより、問題が完全に隠されます。
サファリ
残念ながら、Safariには、:rootフォントサイズを変更するremとメディアクエリ範囲の計算値が実際に変更されるという既知のバグがあります。:rootメディアクエリ内で要素のfont-size が変更された場合、これは非常に奇妙な動作を引き起こす可能性があります。幸い、修正は簡単です。メディアクエリに単位を使用しますem。
コンテキストの切り替え
プロジェクトをさまざまな異なるプロジェクトに切り替えると、見かけ上のfont-sizeのrem値が異なる可能性があります。あるプロジェクトでは、見かけのサイズを使用している可能性が10pxあり、別のプロジェクトでは見かけのサイズがである可能性があります1px。これは混乱を招き、問題を引き起こす可能性があります。
ここでの私の唯一の推奨事項は、見かけのサイズ62.5%に変換するremことに固執すること10pxです。これは、私の経験ではより一般的であるためです。
共有CSSライブラリ
埋め込みウィジェットなど、制御できないサイトで使用されるCSSを作成している場合、実際のサイズremがどの程度かを知るための良い方法はありません。その場合は、引き続きご利用くださいpx。
それでも使用したい場合はrem、SassまたはLESSバージョンのスタイルシートを変数とともにリリースして、の見かけのサイズのスケーリングをオーバーライドすることを検討してremください。
*の使用をだまして欲しくないのですがrem、すべてのブラウザが16pxデフォルトで使用していることを正式に確認できていません。あなたが見る、ブラウザがたくさんあり、それは1つのブラウザでは多少のこれまで発散したとのために、すべてのこと難しいこと言わないだろう15pxか18px。ただし、テストでは、デフォルト設定を使用しているシステムでデフォルト設定を使用しているブラウザが以外の値を持っている単一の例を見たことはありません16px。そのような例を見つけたら、私と共有してください。
