CSSにpxまたはrem値の単位を使用する必要がありますか？
私は新しいウェブサイトをデザインしています、そしてそれはできるだけ多くのブラウザとブラウザ設定と互換性があることを望みます。フォントや要素のサイズに使用する測定単位を決定しようとしていますが、決定的な答えを見つけることができません。
私の質問は、CSSにpxとremのどちらを使うべきですか？
- これまでのところ、
pxを使用することは、ブラウザで基本フォントサイズを調整するユーザと互換性がないことを私は知っています。 emsは、カスケードするのでremsと比較して維持するのが面倒なので、無視しました。remsは解像度に依存しないため、より望ましいと言う人もいます。しかし、最近のほとんどのブラウザはとにかくすべての要素を均等にズームすると言う人もいるため、pxを使用しても問題ありません。
私がこれを求めているのは、CSSで最も望ましい距離の尺度が何かについてはさまざまな意見があり、どちらが最良であるかわからないからです。
TL; DR：pxを使用してください。
事実
まず、 仕様による 、CSSの
pxの単位は物理的な1表示ピクセルに等しくないことを知っておくことは非常に重要です。これは常に本当だった - 1996年でさえも CSS 1 spec 。CSSはreference pixelを定義しています。これは、96 dpiディスプレイ上のピクセルサイズを測定します。 96dpiとは実質的に異なるdpiを持つディスプレイでは（Retinaディスプレイのように）、そのサイズが参照ピクセルのサイズと一致するように、ユーザーエージェントは
pxユニットを再スケーリングします。言い換えれば、この再スケーリングはまさに1 CSSピクセルが2物理Retinaディスプレイピクセルに等しい理由です。とはいえ、2010年まで（そしてモバイルズームの状況にもかかわらず）、
pxはほとんどの場合1物理ピクセルに相当しました。これは、広く利用可能なディスプレイがすべて96dpi前後だったためです。emsで指定されたサイズは相対的です親要素に対して。これは、ネストされた要素が次第に大きくなったり小さくなったりするemの "複合問題"を引き起こします。例えば：body { font-size:20px; } div { font-size:0.5em; }私たちに与えます：
<body> - 20px <div> - 10px <div> - 5px <div> - 2.5px <div> - 1.25pxCSS3
remは、常にルートのhtml要素に対してのみ相対的であり、現在は 使用中のすべてのブラウザの96％ でサポートされています。
意見
私は、あなたのページを全員に対応できるようにデザインし、視覚障害者に配慮するのがよいと誰もが同意すると思います。そのような考慮事項の1つ（ただし、それだけではありません！）では、ユーザーがサイトのテキストを大きくして読みやすくすることができます。
最初は、テキストサイズを拡大縮小する方法をユーザーに提供する唯一の方法は、相対サイズの単位（emsなど）を使用することでした。これは、ブラウザのフォントサイズメニューが単にルートフォントサイズを変更したためです。したがって、pxでフォントサイズを指定した場合、ブラウザのフォントサイズオプションを変更してもフォントサイズは変わりません。
最近のブラウザ（そしてそれほど新しくないIE7でも）は、デフォルトの拡大縮小方法を、画像やボックスサイズを含むすべてのものに単にズームインするように変更しました。基本的に、それらは基準ピクセルをより大きくまたはより小さくする。
はい、だれかが自分のブラウザのデフォルトスタイルシートをデフォルトのフォントサイズを調整する（古いスタイルのフォントサイズのオプションと同等）に変更することはできますが、それは非常に難解な方法です。1 やります。 （Chromeでは、詳細設定、Webコンテンツ、フォントサイズの下に埋め込まれています。IE9では、もっと隠れています。Altキーを押して、View、Text Sizeに移動する必要があります。）ブラウザのメインメニュー（または Ctrl++/-/マウスホイール）.
1 - 当然統計誤差内
ほとんどのユーザーがズームオプションを使用してページを拡大縮小すると仮定すると、相対的な単位はほとんど無関係です。すべてが同じ単位で指定されている場合（画像はすべてピクセル単位で処理される）、ページを作成する方がはるかに簡単です。また、合成を心配する必要はありません。 （"私には数学はないと言われた] - 実際に1.5emになるものを計算しなければならないことを扱っています。）
フォントサイズに相対単位のみを使用することによるもう1つの潜在的な問題は、ユーザーサイズ変更されたフォントがレイアウトの仮定を破る可能性があることです。たとえば、これによりテキストが切り取られたり長すぎたりする可能性があります。絶対単位を使用する場合は、レイアウトが崩れて予想外のフォントサイズになることを心配する必要はありません。
だから私の答えはピクセル単位を使用することです。私はすべてにpxを使います。もちろん、状況はさまざまです。IE6をサポートする必要がある場合（RFCの神々があなたに慈悲を抱く可能性がある場合）、とにかくemsを使用する必要があります。
この記事 では、px、em、およびremの長所と短所について詳しく説明しています。
著者は最後に、最も良い方法はおそらくpxとremの両方を使い、古いブラウザではpxを宣言し、新しいブラウザではremを再宣言することです：
html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
反射的な答えとして、remを使用することをお勧めします。必要であれば、ドキュメント全体の「ズームレベル」を一度に変更できるからです。場合によっては、サイズを親要素に対して相対的にしたい場合は、emを使用します。
しかしremのサポートはむらがあり、IE8はpolyfillを必要とし、そしてWebkitはバグを示しています。さらに、サブピクセル計算によって、1ピクセルラインなどが消えることがあります。この問題を解決するには、そのような非常に小さな要素をピクセル単位でコーディングします。それはさらに複雑さをもたらします。
それで、全体的に見て、それが価値があるかどうか自分自身に尋ねてください - CSS内の文書全体の「ズームレベル」を変更することがどれほど重要であり、可能性が高いですか？
ある場合にはそれはイエス、ある場合にはそれはノーになるでしょう。
それで、それはあなたのニーズに依存します、そして、あなたは賛否両論を重くしなければなりません、なぜならremとemを使うことは「通常の」ピクセルベースのワークフローと比較していくつかの追加の考慮を導入するからです。
次の2つのCSSコードでも同じ結果が得られるため、CSSをpxからremに切り替える（または変換する）のは簡単です（JavaScriptも別の話です）。
html {
}
body {
font-size:14px;
}
.someElement {
width: 12px;
}
html {
font-size:1px;
}
body {
font-size:14rem;
}
.someElement {
width: 12rem;
}
josh3736の答えは良いものですが、3年後に対抗策を提示するために：
開発者であるあなたがサイズを変更するのが簡単になるという理由だけで、フォントにはrem単位を使用することをお勧めします。ユーザーが自分のブラウザでデフォルトのフォントサイズを変更することはめったにないこと、そして最近のブラウザのズーム機能はpx単位まで拡大することは事実です。しかし、上司があなたに来て、「画像やアイコンを拡大しないで、すべてのフォントを大きくする」と言ったらどうでしょうか。ルートフォントサイズを変更して他のすべてのフォントをそれに比例して拡大し、次にpxサイズを数十または数百のCSSルールで変更する方がはるかに簡単です。
一部の画像、またはデザインの規模にかかわらず常に同じサイズである必要がある特定のレイアウト要素にpxユニットを使用することは、依然として意味があると思います。
Caniuse.comは、josh3736が2012年に回答を投稿したときにブラウザの75％しかいないと言っていたかもしれませんが、3月27日現在 は93.78％のサポートを主張します 。彼らが追跡するブラウザの中でIE8だけがそれをサポートしません。
私はウェブサイトのフォントサイズをプログラムする最良の方法はbodyのベースフォントサイズを定義し、それから私がその後宣言する他のすべてのfont-sizeのためにem（またはrem's）を使うことです。それが私の考えている個人的な好みですが、それは私にはよく役立っていて、またより敏感なデザイン を取り入れることをとても簡単にしました 。
Remユニットの使用に関しては、コードをプログレッシブにすることと、古いブラウザをサポートすることのバランスをとるのが良いと思います。 remユニットのブラウザサポート についてのこのリンクをチェックしてください。
ptは比較的固定されているという点でremと似ていますが、非準拠のブラウザがpxをデバイス依存の方法で扱う場合でも、ほとんど常にDPIに依存しません。 remはルート要素のフォントサイズによって異なりますが、Sass/Compassのようなものをptを使って自動的に行うことができます。
あなたがこれを持っていたならば：
html {
font-size: 12pt;
}
1remは常に12ptになります。 remとemは、それらが依存する要素と同じくらいデバイスに依存しません。一部のブラウザは仕様に従って動作せず、pxを文字通りに扱います。昔のWebでも、1ポイントは常に1/72インチと見なされていました。つまり、1インチに72ポイントあります。
あなたが古い、準拠していないブラウザを持っていて、あなたが持っているなら：
html {
font-size: 16px;
}
1remはデバイスに依存します。デフォルトでhtmlから継承する要素の場合、1emもデバイスに依存します。 12ptは、保証されたデバイスに依存しない同等のものです：16px / 96px * 72pt = 12pt、ここで96px = 72pt = 1in。
あなたが特定の単位に固執したいならば、数学をすることはかなり複雑になるかもしれません。たとえば、.75em of html = .75rem = 9pt、.66em of .75em of html = .5rem = 6ptなどです。良い経験則：
- 絶対サイズには
ptを使用してください。これをルート要素に対して動的にする必要がある場合は、CSSの要求が多すぎます。 Sass/SCSSのように、CSSに準拠した言語が必要です。 - 相対サイズには
emを使用してください。「左側のマージンを文字の最大幅程度にしたい」と言うのはとても便利です。この要素のテキストを周囲のテキストよりも少し大きくします。<h1>は、フォントサイズをemsで使用するのに適した要素です。さまざまな場所で表示される可能性があるためですが、常に近くのテキストよりも大きくする必要があります。こうすることで、h1に適用されるクラスごとに別々のフォントサイズを設定する必要がなくなります。フォントサイズは自動的に調整されます。 - 非常に小さいサイズには
pxを使用してください。非常に小さいサイズでは、ptとptが完全に並んでいないため、96 DPIではpxがぼやけます。アップ。細い1ピクセルの枠線を作成するだけの場合は、そのように言います。高DPIディスプレイを使用している場合、これはテスト中には明らかになりません。したがって、ある時点で一般的な96 DPIディスプレイでテストするようにしてください。 - 高DPIディスプレイで物事を凝らすためにサブピクセルを扱わないでください - 特に高DPIディスプレイではサポートしているブラウザもありますが - それはノーだ。 Webは私たちにそれ以外の方法で開発者を教えていますが、ほとんどのユーザーは大きくて明確なを好む。最先端の画面を使用してユーザーに詳細を追加したい場合は、ベクトルグラフィックを使用できます（read：SVG）。