CSS では px 値単位と rem 値のどちらを使用すればよいですか? [closed] 質問する

Question

TL;DR: を使用しますpx。

事実

まず、知っておくことは非常に重要です仕様通りCSSpx単位は物理的なディスプレイピクセルと同じではありません。これは1996年以降も変わりません。CSS 1 仕様。

CSS は、96 dpi ディスプレイ上のピクセルのサイズを測定する参照ピクセルpxを定義します。96 dpi と大幅に異なる dpi を持つディスプレイ (Retina ディスプレイなど) では、ユーザーエージェントは単位のサイズを参照ピクセルのサイズと一致するように再スケーリングします。言い換えると、この再スケーリングにより、1 CSS ピクセルが 2 つの物理的な Retina ディスプレイピクセルに等しくなります。

とはいえ、2010 年までは (モバイルズームの状況は別として)、px広く普及しているディスプレイはすべて 96 dpi 前後だったため、はほぼ常に 1 つの物理ピクセルに等しかったのです。
で指定されたサイズは、親要素をem基準とします。これにより、ネストされた要素が徐々に大きくなったり小さくなったりする「複合問題」が発生します。例:em
```
  body { font-size:20px; } 
  div { font-size:0.5em; }
```
以下が得られます:
```
  <body> - 20px
      <div> - 10px
          <div> - 5px
              <div> - 2.5px
                  <div> - 1.25px
```

rem常にルート要素のみを基準とするCSS3がhtml、使用されているブラウザの99.67%。

意見

誰もが使いやすいようにページを設計し、視覚障害者に配慮することは良いことだと誰もが同意すると思います。そのような配慮の 1 つ (ただし、唯一のものではありません) は、ユーザーがサイトのテキストを大きくして読みやすくできるようにすることです。

当初、テキストサイズを拡大縮小する方法をユーザーに提供する唯一の方法は、相対的なサイズ単位 ( ems など) を使用することでした。これは、ブラウザのフォントサイズメニューが単にルートフォントサイズを変更するだけだったためです。したがって、でフォントサイズを指定した場合、pxブラウザのフォントサイズオプションを変更しても、サイズは拡大縮小されません。

最新のブラウザ (それほど最新ではない IE7 も含む) はすべて、デフォルトのスケーリング方法を、画像やボックスサイズを含むすべてのものを単純に拡大するように変更しました。基本的に、参照ピクセルを大きくしたり小さくしたりします。

はい、ブラウザのデフォルトのスタイルシートを変更してデフォルトのフォントサイズ (旧スタイルのフォントサイズオプションに相当) を微調整することはできますが、これは非常に難解な方法なので、誰もやらないでしょう^。 (Chrome では、詳細設定、Web コンテンツ、フォントサイズの下に隠れています。IE9 ではさらに隠れています。Alt キーを押して、表示、テキストサイズに移動する必要があります。) ブラウザのメインメニューでズームオプションを選択する (またはCtrl+ +/ -/ マウスホイールを使用する) 方がはるかに簡単です。

^{1 - 当然ながら統計誤差の範囲内}

ほとんどのユーザーがズームオプションを使用してページを拡大縮小すると仮定すると、相対的な単位はほとんど無関係であることがわかります。すべてが同じ単位で指定されていると (画像はすべてピクセル単位で処理されます)、ページの開発がはるかに簡単になり、複合化について心配する必要がなくなります。( 「計算は不要だと言われました」 – 1.5em が実際に何になるかを計算する必要があります。)

フォントサイズに相対単位のみを使用する場合のもう 1 つの潜在的な問題は、ユーザーがフォントのサイズを変更したために、レイアウトの想定が崩れる可能性があることです。たとえば、テキストが切り取られたり、長くなりすぎたりする可能性があります。絶対単位を使用すると、予期しないフォントサイズによってレイアウトが崩れることを心配する必要はありません。

したがって、私の答えはピクセル単位を使用することです。私はpxすべての場合にを使用します。もちろん、状況は異なる可能性があり、IE6 をサポートする必要がある場合 (RFC の神々があなたに慈悲を与えますように)、とにかく s を使用する必要がありますem。

Answer 1