ピクセルではなくemを使用してスタイルシートでサイズと距離を定義する必要があると聞きました。問題は、CSSでスタイルを定義するときにpxではなくemを使用する必要があるのはなぜですか？これを説明する良い例はありますか？

一方が他方よりも良い選択であると言うのは間違っています（または両方が仕様で独自の目的を与えられなかったでしょう）。StackOverflowがpxユニットを広範囲に使用していることは注目に値するかもしれません。スポークがそうだったと言われたのは悪い選択ではありません。

単位の定義

• PXは、（のような測定の絶対的な単位であるにおいて、PT、またはセンチメートルもの1/96であることを起こること）に単位（なぜ後でより）。これは絶対的な測定であるため、ブラウザウィンドウのサイズやフォントサイズなどに比例するのではなく、何かを特定のサイズに定義したいときにいつでも使用できます。

  他のすべての絶対単位と同様に、px単位はブラウザーウィンドウの幅に合わせてスケーリングされません。したがって、ページデザイン全体が％ではなくpxなどの絶対単位を使用する場合、ブラウザの幅に適応しません。これは本質的に良いことでも悪いことでもありません。正確なサイズを守ることと、伸縮に対して柔軟性がないが、正確なサイズを守らないプロセスでは、デザイナーが選択する必要があるだけです。サイトでは、固定サイズと柔軟なサイズのオブジェクトが混在しているのが一般的です。

  多くの場合、広告バナー、ロゴ、アイコンなどの固定サイズの要素をページに組み込む必要があります。これにより、ほとんどの場合、デザインで少なくともいくつかの pxベースの測定が必要になります。たとえば、画像は（デフォルトで）各ピクセルのサイズが1 * px *になるようにスケーリングされるため、画像を中心に設計する場合はpxユニットが必要になります。また、正確なフォントサイズ設定やボーダーの幅にも非常に役立ちます。丸めが原因で、大部分の画面でpx単位を使用するのが最も理にかなっています。

  すべての絶対測定値は互いに厳密に関連しています。つまり、1インチがある常に 96px同じように、1インチがある常に 72pt。（スクリーンベースのメディアについて話すとき、1inが実際に物理的なインチになることはほとんどないことに注意してください）。すべての絶対測定は96ppiの名目上の画面解像度とデスクトップモニタの公称視距離を想定し、そのような画面上の一のPXは 1つのに等しいであろう物理的な画面上の画素と一つで96物理ピクセルに等しくなります。ピクセル密度または表示距離のいずれかが大幅に異なる画面、またはユーザーがブラウザーのズーム機能を使用してページをズームした場合、pxは必ずしも物理ピクセルに関連付けられなくなります。

• emは絶対単位ではありません-現在選択されているフォントサイズに関連する単位です。フォントサイズを絶対単位（pxやptなど）で設定してフォントスタイルをオーバーライドしていない限り、ユーザーのブラウザまたはOSで選択したフォントによってフォントの選択が影響を受けるため、意味がありません。フォントサイズの拡大縮小に合わせて具体的に拡大縮小したい場合を除いて、emを一般的な長さの単位として使用します。

  特に何かのサイズを現在のフォントサイズに依存させる場合は、emを使用します。

• ％は、この場合、親要素の高さまたは幅に対する相対的な単位でもあります。デザインが特定のピクセルサイズに依存してサイズを設定していない場合は、デザインの全幅などのピクセル単位の代替として適しています。

  デザインで％単位を使用すると、デザインを画面/デバイスの幅に適合させることができますが、pxなどの絶対単位を使用すると適合しません。

高解像度の小さなラップトップを持っていて、Firefoxを120％のテキストズームで実行して、目を細めることなく読むことができます。

多くのサイトでこれに問題があります。レイアウトはすべて文字化けし、ボタンのテキストは半分にカットされるか、完全に消えます。stackoverflow.comでさえも問題があります：

トップボタンとページタブがどのように重なっているかに注意してください。pxの代わりにem単位を使用していれば、問題はありませんでした。

私がこの質問をした理由は、CSSでハッキングしていたときのようにemの使い方を忘れてしまったためです。フォント自体のサイズ変更について話していなかったため、一般的な質問を続けていることに人々は気づきませんでした。ページ上の特定のブロック要素にスタイルを定義する方法にもっと興味がありました。

以下のようヘンリク・ポールと他の人が指摘したEMは、要素に使用するフォントサイズに比例しています。pxでブロック要素のサイズを定義することは一般的な方法ですが、ブラウザーでフォントをサイズ変更すると、通常、このデザインが壊れます。フォントのサイズ変更は、通常、ショートカットキーCtrl+ +またはCtrl+で行い-ます。したがって、代わりにemを使用することをお勧めします。

pxを使用して幅を定義する

以下に例を示します。スタイリッシュな日付ボックスにしたいdivタグがあるとします。次のようなHTMLコードがあるとします。

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

簡単な実装では、date-boxクラスの幅をpx で定義します。

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

問題

ただし、ブラウザでテキストのサイズを大きくすると、デザインが壊れます。テキストはボックスの外にも流れます。これは、Flodinが指摘しているように、SOの設計で起こることとほとんど同じです。これは、ボックスがロックされたときと同じ幅のサイズのままであるため50pxです。

代わりにemを使用する

より賢い方法は、代わりにemsで幅を定義することです：

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

そうすることで、日付ボックスに滑らかなデザインができます。つまり、ボックスは、日付ボックスに定義されたフォントサイズに比例してテキストとともにサイズが大きくなります。この例では、font-sizeは*10ptとして定義されており、そのフォントサイズの2.5倍のサイズになります。したがって、ブラウザでフォントのサイズを変更する場合、ボックスのサイズはそのfont-sizeの2.5倍になります。

ここでthomasrutterからのトップ投票の回答は、emについての彼の回答のとおりです。しかし、ピクセルのサイズについては非常に間違っています。ですから、古くてもさっぱりです。

コンピュータ画面は通常96dpiではありません！（または、あなたが徹底的になりたいならば、ppi。）

ピクセルの物理サイズは固定されていません。
（はい、それは1つの画面内でのみ修正されますが、次の画面では1ピクセルはおそらく大きいまたは小さい、そして確かに1/96インチではありません。）


プルーフ
960ピクセルの長さの線を描きます。物理的な定規でそれを測定します。10インチですか？番号..？
ラップトップをテレビに接続します。ラインは今10インチですか？まだありません？
iPhoneでラインを表示します。まだ同じサイズですか？何故なの？

一体一体誰が96dpiコンピュータスクリーンの神話を発明したのですか？
（一部の宗教は72dpiの神話で運営されていますが、同様に間違っています。）

フォントサイズに合わせて拡大縮小する必要があるすべてのものに役立ちます。

これは、フォントサイズを拡大縮小してズームを実装するブラウザで特に役立ちます。したがって、使用emするすべての要素のサイズを変更すると、それに応じてスケーリングされます。

em（http://en.wikipedia.org/wiki/Em_ ( typography））は、現在使用されているフォントサイズに直接比例するためです。フォントサイズがたとえば16ポイントの場合、1 emは16ポイントです。フォントサイズが16ピクセルの場合（注：ポイントとは異なります）、1つのemは16ピクセルです。

これは2つの（関連する）事柄につながります。

1. 後でCSSでフォントサイズを編集することを選択した場合、比率を維持するのは簡単です。
2. 多くのブラウザはカスタムフォントサイズをサポートし、CSSをオーバーライドします。すべてをピクセルで設計すると、レイアウトが壊れる可能性があります。ただし、emsを使用する場合、これらのオーバーライドによりこれらの問題を軽減する必要があります。

例：

コード：body {font-size：10px;} //すべてのサイズを10以下に保ち、この値を変更して、残りをたとえばこの値の1.4に変更します

1 {font-size：1.2em;} // 12px

2 {font-size：1.4em;} // 14px

3 {font-size：1.6em;} // 16px

4 {font-size：1.8em;} // 18ピクセル

5 {font-size：2em;} // 20px

…

体

1

2

３

4

5

本体の値を変更すると、残りは自動的に変更されて基本値の一種になります…

10×2 = 20 10×1.6 = 16など

あなたは8pxとしてベース値を持つことができます…それで8×2 = 16 8×1.6 = 12.8 //ブラウザによって丸められるかもしれません

非常に実用的な理由は、pxを使用して指定されている場合、IE 6ではフォントのサイズを変更できないのに対し、emやパーセンテージなどの相対単位を使用している場合はそうです。ユーザーがフォントのサイズを変更できないようにすることは、アクセシビリティにとって非常に悪いことです。減少傾向にありますが、IE 6ユーザーはまだたくさんいます。

グラフィカル要素を正確に配置するには、pxを使用します。emを使用して、行の高さなどのテキスト要素の周りに配置および間隔を設定する必要がある測定に使用します。

emまたはパーセンテージを使用する主な理由は、ユーザーがデザインを壊すことなくテキストサイズを変更できるようにするためです。pxで指定されたフォントを使用してデザインする場合、ユーザーがテキストサイズを選択しても、フォントは（IE 6などで）サイズを変更しません。これは視覚障害を持つユーザーにとっては非常に悪いことです。

このようなデザインのいくつかの例と記事（選択できるアイテムは無数にあります）については、A List Apart：Fluid Gridsの最新号、古い記事「CSSでテキストのサイズを設定する方法」またはDan Cederholmの防弾ウェブデザインを参照してください。。

画像は引き続きpxサイズで表示されますが、一般的に、テキストのサイズをpxにすることは適切なフォームとは見なされません。

私が個人的にIE6を軽視しているのと同じくらい、それは現在、フォーチュン200の会社の大多数のユーザーに対して承認された唯一のブラウザーです。

pxを使用してフォントサイズを指定したいが、これをCSSファイルに配置することでemが提供する使いやすさを望む場合は、簡単な解決策があります。

body {
  font-size: 62.5%;
}

次に、次のようにp（およびその他の）タグを指定します。

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

等々。

（サイトから）IE6がなくなるまで、フォントサイズにemを使用することをお勧めします。Pxは、ページのズーム（テキストのズームではなく）が標準の動作になると問題ありません。

Traingamerはすでに必要なリンクを提供しています。

ピクセルは絶対単位ですが、rem / emは相対単位です。詳細：https : //drafts.c​​sswg.org/css-values-3/

システムがfont-size値をHTML要素であるルート要素に提供するため、システムのフォントサイズに従ってfont-sizeを適応させる場合は、相対単位を使用する必要があります。

この場合、ウェブページがgoogle chromeで開かれている場合、HTML要素のfont-sizeはchromeによって設定されます。それを変更して、rem / emユニットのフォントを含むウェブページへの影響を確認してください。

pxフォントの単位として使用する場合、フォントはサイズ変更されませんが、rem/emは変更されませんが、システムのフォントサイズを変更するとサイズが変更されます。

したがってpx、サイズを固定したい場合はrem/ を使用emし、サイズをシステムのサイズに適応/動的にしたい場合は/ を使用します。

一般的なコンセンサスは、ブラウザー/プラットフォーム間でより一貫しているため、フォントのサイズ変更にパーセンテージを使用することです。

面白いことに、私はいつもフォントのサイズ変更にptを使用しており、すべてのサイトがそれを使用すると想定していました。通常、他のアプリ（Wordなど）ではpxサイズを使用しません。それは印刷用だからだと思いますが、WebブラウザーでもWordと同じサイズです...

計算された値を見つけやすくするために、emまたはpxがremを使用するのを避けてください。ただし、emとpxの間では、emはデバッグが難しいため、pxの方が適しています。