これは、Chris Coyerのメモ
「Why Ems？」の翻訳
です。 css-tricks.comで。
私は長い間
pxを使用してフォントサイズを設定しました。そのため、Internet Explorer 6-8ではフォントサイズを変更できませんでした。
emへの切り替えにはいくつかの利点があり、この記事ではそれらについて詳しく検討します。
異なる画面でフォントのサイズを変更する
これが「ピクセル」サイズの主な問題です。 たとえば、サイトのCSSスタイルでは、さまざまなタイポグラフィ要素の
font-sizeがピクセル単位で50回設定されています。 この場合、メディアクエリを使用してスケーリングするには、これら50
フォントサイズのそれぞれを構成する必要があります。 ただし、
emでディメンションを設定した場合、
bodyタグでのみ変更を行う必要があり、プロパティが継承されます。
body { font-size: x-large; } @media (max-width: 1000px) { body { font-size: large; } } @media (max-width: 500px) { body { font-size: medium; } }
異なるピクセル
px値は、画面の物理ピクセルとは異なります。
CSS pxの違いについて
は、角度測定の記事をご覧ください。
相対パディング
サイトのテキストヘッダーでアイコン画像を使用する必要があるとします。正しい表示には特定のインデントが必要です。
padding-left：20pxのような構造は使用できません。これらの20ピクセルは一定であり、フォントサイズに応じて変化しないためです。 そして、
emでインデントを指定すると、それらは相対的になります。
コミュニケーションズ
一般に、すべてのCSSサイズがem（フォントサイズ、マージン、パディング）に設定されている場合、デザインとタイポグラフィの間の接続はより柔軟になります。外観に影響を与えずに変更を行うのがはるかに容易になります。
軟膏で飛ぶ
それでも、emにはいくつかの不快な欠点があります。たとえば、「カスケード」です。通常のリスト要素を（li）
font-size：1.1emに設定すると、子（ネスト）要素がこの値を合計します。
li li {font-size：1em;を使用して問題を解決でき
ます。 }ただし、非常に退屈です。
フォントサイズをremに割り当てることはここで役立ちますが、すべてのブラウザがこの方法をサポートしているわけではありません（IE 9+）。