css - CSS で % の代わりに ems を使用する利点は何ですか?

Question

ピクセルやポイントなどの静的な測定値を優先してemを使用する利点は理解していますが、ほとんどの CSS 関係者 (SO を除く)が % 値の代わりにemを使用することを好むのはなぜですか?

Answer 1

フォント サイズの場合:

• em と % はどちらも親要素のフォント サイズに相対的です (つまり、2em と 200% は常に同じ結果になります)。
• em にはタイポグラフィの歴史があります (ただし、CSS em はタイポグラフィ em と同じではありません)。
• CSS のブラウザー実装では、em よりも % の方がバグが少ない

それ以外の場合 (要素の幅など):

• em はフォントサイズに相対的です
• % は親要素に相対的です

…したがって、両者はまったく異なることを行うため、ケースバイケースで検討する必要があります。

Answer 2

Ems は既知の一貫した値 (font-size) に基づいていますが、パーセンテージはコンテナーのサイズに基づいています。寸法とサイズの基準がコンテキスト (どの要素/コンテナー内にあるか) に応じて変化する場合、CSS を設計して理解することははるかに困難です。

Answer 3

その理由の 1 つは、多くの Web デザイナーが印刷デザイナーとしてスタートしたため、測定単位として em に慣れているためだと思います。それは確かに私の場合です。

Answer 4

25%/50%/25% の 3 列のページ レイアウトを指定し、6 行の記事 (16% のフォント サイズ)、1 ページあたり 5 つの記事 (20% の高さ) を許可するフォントを指定します。

画面解像度が 320x200px の組み込みデバイスを想像してみてください。