私は長い間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+）。