css - なぜpxではなくemなのですか？

Question

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

score 589 · Accepted Answer

一方が他方よりも優れた選択であると言うのは間違っています (または、仕様で両方に独自の目的が与えられていないでしょう)。StackOverflow が px 単位を多用していることは注目に値するかもしれません。それは、スポイクが言われた悪い選択ではありません。

単位の定義

pxは絶対測定単位 ( in、pt、またはcmなど) であり、たまたまin単位の 1/96 です (理由については後で説明します)。これは絶対的な測定値であるため、ブラウザウィンドウのサイズやフォントサイズなどに比例するのではなく、何かを特定のサイズに定義したい場合にいつでも使用できます。

他のすべての絶対単位と同様に、px単位はブラウザーウィンドウの幅に応じて拡大縮小されません。したがって、ページ全体のデザインで%ではなくpxなどの絶対単位を使用すると、ブラウザーの幅に適応しません。これは本質的に良いとも悪いとも言えません。設計者は、正確なサイズに固執することと、伸縮性がないことの間で選択する必要がありますが、その過程で正確なサイズに固執することはありません。固定サイズのオブジェクトと可変サイズのオブジェクトが混在するサイトは一般的です。

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

すべての絶対測定値は互いに厳密に関連しています。つまり、 1inは常に96pxであり、1inは常に72ptです。(スクリーンベースのメディアについて話すとき、 1 インチが実際に物理的なインチになることはほとんどないことに注意してください) 。すべての絶対測定値は、96ppi の公称画面解像度とデスクトップモニターの公称表示距離を想定しており、そのような画面では、1 pxは画面上の 1 物理ピクセルに等しく、1 px は画面上の 1物理ピクセルに等しくなります。 96 物理ピクセルに等しくなります。ピクセル密度または表示距離が大幅に異なる画面上、またはユーザーがブラウザのズーム機能を使用してページをズームした場合、pxは必ずしも物理ピクセルに関連付けられなくなります。
emは絶対単位ではありません。現在選択されているフォントサイズに相対的な単位です。フォントサイズを絶対単位 ( pxやptなど) で設定してフォントスタイルをオーバーライドしていない限り、これはユーザーのブラウザーまたは OS でフォントを選択した場合に影響を受けるため、意味がありません。フォントサイズの拡大縮小に合わせて拡大縮小する必要がある場合を除き、em を長さの一般的な単位として使用します。

何かのサイズを現在のフォントサイズに依存させたい場合は、emを使用します。
remはemに似ていますが、現在の要素に指定されたフォントサイズではなく、ドキュメント (具体的にはルート要素) の基本フォントサイズに相対的です。
%は、この場合、親要素の高さまたは幅に対する相対単位でもあります。デザインが特定のピクセルサイズに依存せずにサイズを設定する場合、デザインの合計幅などにpx単位の代わりとして使用できます。

デザインで%単位を使用すると、デザインを画面/デバイスの幅に適応させることができますが、pxなどの絶対単位を使用すると適応しません。
vh、vw、vmin、およびvmaxは%のような相対単位ですが、親要素ではなくビューポートのサイズ (ウィンドウの表示可能領域のサイズ) に相対的です。それぞれ、ビューポートの高さ、幅、小さい方、大きい方に相対的です。

score 106 · Accepted Answer

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

Henrik Paulなどが指摘したように、em は要素で使用される font-size に比例します。ブロック要素のサイズを px で定義するのが一般的な方法ですが、ブラウザーでフォントのサイズを大きくすると、通常、この設計が崩れます。フォントのサイズ変更は通常、ショートカットキーCtrl++またはCtrl+で行い-ます。そのため、代わりに em を使用することをお勧めします。

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

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

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

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

* { 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 倍の大きさになります。したがって、ブラウザでフォントのサイズを変更すると、ボックスはそのフォントサイズの 2.5 倍のサイズになります。

score 60 · Accepted Answer

ここで thomasrutter からの投票数が最も多い回答は、emに関する彼の回答で正しいです。しかし、ピクセルのサイズについては非常に間違っています。ですから、古いとはいえ、それを否定するわけにはいきません。

通常、コンピューターの画面は 96dpi ではありません。(または、ペダンティックになりたい場合は ppi。)

ピクセルには固定の物理サイズはありません。(はい、これは1 つの
画面内でのみ修正されますが、次の画面ではピクセルが大きくなったり小さくなったりする可能性が高く、1/96 インチにはなりません。) 証明 960 ピクセルの長さの線を引きます。物理定規で測ります。10インチですか？いいえ..？ラップトップをテレビに接続します。ラインは今10インチですか？まだありません？ iPhone で線を表示します。まだ同じサイズ？なぜだめですか？

一体誰が 96dpi コンピューター画面の神話を発明したのでしょうか?
(一部の宗教は 72 dpi の神話で運営されています。しかし、同様に間違っています。)

score 10 · Accepted Answer

例：

Code: 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;} //18px

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

…</p>

体

1

2

3

4

5

body の値を変更すると、残りは自動的にベース値の倍数に変更されます…</p>

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

基本値を 8px にすることもできます… 8×2=16 8×1.6=12.8 //ブラウザによって丸められる可能性があります

score 8 · Accepted Answer

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

score 2 · Accepted Answer

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

このようなデザインのいくつかの例と記事 (選択できるものは無数にあります) については、最新号の A List Apart: Fluid Grids 、古い記事How to Size Text in CSSまたは Dan Cederholm のBulletproof Web Designを参照してください。

画像は引き続き px サイズで表示する必要がありますが、一般に、テキストのサイズを px にすることは適切な形式とは見なされません。

私は個人的に IE6 を軽蔑していますが、現在、Fortune 200 企業の大部分のユーザーに承認されている唯一のブラウザーです。

score 0 · Accepted Answer

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

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

score -1 · Accepted Answer

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

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

score -5 · Accepted Answer

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