なぜpxではなくemなのでしょうか。
スタイルシートでサイズと距離をピクセル単位ではなくemで定義する必要があると聞きました。問題は、CSSでスタイルを定義するときに、なぜpxの代わりにemを使うべきなのかということです。これを説明する良い例はありますか？
私がこの質問をしたのは、CSSを楽しくハックしている間、emの使い方を忘れたからです。私はフォント自体のサイズ変更について話していなかったので私は一般的な質問を続けたことに人々は気付かなかった。私は、ページ上の任意のブロック要素にスタイルを定義する方法にもっと興味がありました。
As Henrik Paul などが指摘したように、emは要素で使用されるフォントサイズに比例します。 pxではブロック要素のサイズを定義するのが一般的な方法ですが、ブラウザのフォントサイズを大きくすると通常このデザインは壊れます。フォントのサイズ変更は、通常ショートカットキーを使って行われます。 Ctrl++ または Ctrl+-。そのため、代わりにemを使用することをお勧めします。
Pxを使って幅を定義する
これは実例です。スタイリッシュな日付ボックスに変換したいdivタグがあるとします。次のようなHTMLコードがあります。
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>
簡単な実装では、pxのdate-boxクラスの幅を定義します。
* { 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;
}
問題
ただし、ブラウザでテキストのサイズを大きくしたい場合は、デザインが崩れます。テキストはボックスの外にも出てきますが、これはSOのデザインで起こることとほとんど同じです flodin が指摘しています。これは、ボックスのサイズが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倍のサイズになります。
一方が他方よりも優れた選択であると言うのは間違っています（または両方とも、仕様で独自の目的が与えられていなかったでしょう）。 StackOverflowがpxユニットを多用することは注目に値するかもしれません。それは悪い選択ではありません。
単位の定義
px は絶対測定単位（in、pt、またはcmなど）で、in単位の1/96になります（詳細理由は後で）。これは絶対サイズなので、ブラウザウィンドウのサイズやフォントサイズのような他のものに比例するのではなく、何か特定のサイズになるように定義したいときはいつでも使用できます。
他のすべての絶対単位と同様に、px単位はブラウザウィンドウの幅に従って拡大縮小されません。したがって、ページデザイン全体で％ではなくpxなどの絶対単位を使用している場合は、ブラウザの幅に合わせて調整されません。これは本質的に良いことでも悪いことでもありません。設計者が正確なサイズに準拠することと伸縮に対して柔軟性がないことの間で選択する必要があるのです。サイトでは、固定サイズのオブジェクトと柔軟なサイズのオブジェクトを混在させるのが一般的です。
広告バナー、ロゴ、アイコンなど、固定サイズの要素をページに組み込む必要があることがよくあります。これにより、ほとんどの場合、設計にsome pxベースの測定が最低限必要になります。たとえば、画像は（デフォルトで）各ピクセルのサイズが1 * px *になるように拡大縮小されるため、画像を中心にデザインする場合はpx単位が必要になります。正確なフォントサイズの設定や、丸めのために大部分の画面でpx単位を使用するのが最も理にかなっているボーダー幅にも非常に役立ちます。
すべての絶対測定値は互いに厳密に関連しています。つまり、1inがalways72ptであるのと同様に、1inはalways96pxです。 （1inは、スクリーンベースのメディアについて話すとき、実際には物理的なinchになることはほとんどありません）。すべての絶対測定値は96ppiの公称画面解像度とデスクトップモニタの公称視聴距離を想定しており、そのような画面では1 pxは画面上の1 physicalピクセルと1 inに等しくなります。は96物理ピクセルになります。ピクセル密度または表示距離が大幅に異なる画面、またはユーザーがブラウザのズーム機能を使用してページをズームした場合、pxは必ずしも物理的なピクセルに関連しなくなります。
em は絶対的な単位ではありません - 現在選択されているフォントサイズに相対的な単位です。フォントサイズを絶対単位（pxやptなど）で設定してフォントスタイルを無効にしていない限り、ユーザーのブラウザまたはOSでフォントを選択している場合は影響を受けます。つまり、フォントサイズの拡大縮小に合わせて拡大縮小したい場合を除き、emを長さの一般的な単位として使用することは意味がありません。
何かのサイズを現在のフォントサイズに依存させたい場合は、emを使用してください。
％ は、この場合は親要素の高さまたは幅に対する相対単位でもあります。デザインが特定のピクセルサイズに依存してサイズを設定していない場合は、px単位の代わりに、デザインの全幅などを使用することをお勧めします。
デザインで％単位を使用すると、画面/デバイスの幅に合わせてデザインを調整できますが、pxなどの絶対単位を使用しても調整できません。
私は高解像度の小さなラップトップを持っていて、しわを付けずに読むことができるようにするために120％のテキストズームでFirefoxを走らせなければなりません。
多くのサイトでこれに問題があります。レイアウトがすべて文字化けしたり、ボタン内のテキストが半分になったり、完全に消えたりします。 stackoverflow.comでもそれに苦しんでいます。
一番上のボタンとページタブが重なっていることに注意してください。もし彼らがpxの代わりにemユニットを使っていたら、問題はなかったでしょう。
ここthomasrutterからのトップ投票回答は em についての彼の回答の中に正しいです。しかし、ピクセルのサイズについては非常に間違っています。だから、たとえそれが古くても、私はそれを無期限にすることはできません。
コンピュータの画面は通常96 dpiではありません！ （または、ppi、あなたが夢中になりたい場合）
ピクセルのサイズは固定されていません。
（はい、それは one screen内でのみ固定されていますが、次の画面ではピクセルはおそらくもっと大きいか小さい、そして確かに1/96インチではありません。）
証明
960ピクセルの長さの線を引きます。物理的な定規でそれを測定してください。それは10インチですか？いいえ。
ノートパソコンをテレビに接続します。ラインは今10インチですか？まだありません？
あなたのiPhoneに線を表示します。それでも同じサイズ？何故なの？
一体誰が96dpiのコンピュータスクリーンの神話を発明したのですか？
（いくつかの宗教は72dpiの神話で活動している。しかし同様に間違っている。）
フォントサイズに従って拡大縮小しなければならないすべてのものに役立ちます。
フォントサイズを拡大縮小してズームを実装するブラウザでは特に便利です。したがって、emを使用してすべての要素のサイズを変更すると、それに応じて拡大縮小されます。
Em（ http://en.wikipedia.org/wiki/Em_(typography） ）は、現在使用されているフォントサイズに正比例するためです。フォントサイズが例えば16ポイントの場合、1 emは16ポイントです。フォントサイズが16ピクセルの場合（ note ：ポイントと同じではありません）、1 emは16ピクセルです。
これにより、2つの（関連する）ことが起こります。
- 後でCSSでフォントサイズを編集する場合は、プロポーションを維持するのが簡単です。
- 多くのブラウザはカスタムフォントサイズをサポートしており、CSSをオーバーライドします。すべてをピクセル単位でデザインすると、レイアウトが崩れる可能性があります。しかし、あなたがemsを使うのであれば、これらのオーバーライドはこれらの問題を軽減するはずです。
例：
コード：body {font-size：10px;} //すべてのサイズを10以下に保ち、この値を変更して残りの部分を変更します。この値の1.4
1 {font-size：1.2em;} // 12px
2 {font-size：1.4em;} // 14ピクセル
3 {font-size：1.6em;} // 16px
4 {フォントサイズ：1.8em;} // 18ピクセル
5 {フォントサイズ：2em;} // 20ピクセル
…
体
1
2
3
4
5
本体の値を変更することで、残りの部分は自動的に変更され、基本値の一種になります。
10×2 = 20 10×1.6 = 16など
基本値は8pxとすることができます…そのため、8×2 = 16 8×1.6 = 12.8 //ブラウザで丸められる可能性があります。
非常に実用的な理由は、IE 6は、pxを使用して指定されている場合はフォントのサイズを変更できないのに対し、emやpercentagesなどの相対単位を使用している場合は変更できます。ユーザーがフォントのサイズを変更できないようにすると、アクセシビリティが非常に悪くなります。減少していますが、まだIE 6人のユーザーがいます。
グラフィカル要素の正確な配置にはpxを使用してください。行の高さなどのテキスト要素の周囲の位置と間隔を指定する必要がある測定にはemを使用します。pxはピクセル単位で正確です。emは使用するフォントによって動的に変化する可能性があります。
あなたがフォントサイズを指定するのに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 */
}
等々。
Emまたはパーセントを使用する主な理由は、デザインを崩さずにユーザーがテキストサイズを変更できるようにするためです。 pxで指定されたフォントを使用してデザインした場合、ユーザーが テキストサイズ - より大きな を選択してもサイズは変わりません（IE 6など）。これは視覚障害者にとっては非常に悪いことです。
このようなデザインに関するいくつかの例や記事（無数の選択肢があります）については、A List Apartの最新号を参照してください。 Fluid Grids 、古い記事 CSSでテキストのサイズを設定する方法 またはダンCederholmの 防弾Webデザイン 。
あなたの画像はそれでもpxサイズで表示されるべきですが、一般的に、それはあなたのテキストをpxでサイズ変更するための良い形式とは見なされません。
私が個人的にIE6を軽蔑するのと同じくらい、それは現在、私たちのFortune 200会社の大部分のユーザーに承認されている only ブラウザです。
それが価値があるもののために、これはCSSの異なる単位の定義です： http://www.w3.org/TR/css3-values/#lengths 。
あなたはおそらくIE6がなくなるまでフォントサイズにemを使いたいでしょう（あなたのサイトから）。 （テキストによるズームではなく）ページによるズームが標準的な動作になると、Pxは問題なく動作します。
Traingamerはすでに 必要なリンクを提供しました 。