emはまだ関連していますか？

このようなスレッドを読んで理解したことは、emsのポイントは、ブラウザで設定できるベースフォントサイズでWebページのすべての測定値を定義することだということです。

たとえば、Chromeではを実行してこれを行うことができますsettings -> show advanced settings -> web content -> font size: very large。遠く離れた大型の高解像度モニターを使用している場合、これを行うことができます。

サイズ設定におけるemsとpxの違いを示すプランカーを作成しました。

#div1 {
  width: 320px
}

#div2 {

  width: 20em;
}

ブラウザでフォントサイズを中に設定すると、これらのdivは同じサイズになり、ベースフォントサイズは16pxになるため、20em = 320pxになります。

ただし、ブラウザのフォントサイズを非常に大きく変更すると、emsで測定されたdivのサイズが大きくなっていることがわかります。

ただし、たとえばbodyタグでフォントサイズを定義すると、この効果は無効になります。

body {
  font-size: 16px;
}

なぜなら今、私のCSSはブラウザによって設定されたフォントサイズをオーバーライドしているからです。

ページをズームしてもフォントが拡大されるだけの古いブラウザの時代にはemが重要だったと思います。しかし、最近の最新のブラウザはピクセルとフォントの両方を拡大し、ズームの問題を解決していません。

Webを見回す-多くのWebサイトでは、bodyタグにフォントサイズを設定しています。

たとえば、スタックオーバーフローは、bodyタグでfont-sizeを13pxに設定します。ブラウザでフォントサイズを設定しても、スタックオーバーフローのレイアウトにはほとんど影響しません。

Google検索結果はこれを行いません。

（これらのスクリーンショットはいずれも、非常に大きいクロムフォントサイズに設定して、100％ズームで撮影したものです）。

したがって、bodyタグでフォントサイズを設定することは、ユーザー自身のアクセシビリティ設定を妨げるため、悪い考えだと考えることができます。しかし、ユーザーがサイズを大きくするためにズームできることを考えると（比例してすべてのピクセルも増加します）-これは本当の問題とは思えません。

ただし、たとえばbodyタグでフォントサイズを定義すると、この効果は無効になります。

body {
  font-size: 16px;
}

なぜなら今、私のCSSはブラウザによって設定されたフォントサイズをオーバーライドしているからです。

あなたはアクセシビリティを忘れています。

参照C14：フォントサイズのem単位を使用してから、Webコンテンツアクセシビリティガイドライン（WCAG 2.0）。

ブラウザのフォントサイズオプションをVery largeに設定します。次に、W3CなどのWebサイトにアクセスします。テキストはどのように見えますか？

これがこのオプションの目的です。StackExchangeおよび他の多くのWebサイトの開発者は、視覚障害のあるユーザーの選択よりも自分の選択の方が重要であると判断しました。この選択が正しいか間違っているかはこの質問の範囲外であり、答えは必ずしも必要ではありません。

ただし、（一部のWebサイトの法律により）さまざまな決定を下し、ユーザーにフォントサイズを選択させることが強制される場合があります。あなたは、ピクセル単位で画像のサイズとページの異なるゾーンを指定する場合には、ブラウザのフォントサイズオプションは、レイアウト上の楽しみの効果を持つことになります、または使用のいずれか：そこから、あなたは選択肢持っているemとして、これらの要素のために上手。

また、ボディレベルでフォントサイズをピクセル単位で指定しない場合はem、少なくともどこでもフォントサイズを維持することに注意してください。たとえば、Googleはフォントサイズを一貫して指定せず、検索ページは奇妙に見えます。特に、タイトルが通常のテキストよりも小さく表示されています。一方、ウィキペディアはem、フォントサイズが指定されている場合は常に使用することで、素晴らしい仕事をしました。以下は、ChromiumによってレンダリングされたフォントサイズオプションがVery largeに設定された両方のサイトのスクリーンショットです。

したがって、bodyタグでフォントサイズを設定することは、ユーザー自身のアクセシビリティ設定を妨げるため、悪い考えだと考えることができます。しかし、ユーザーがサイズを大きくするためにズームできることを考えると（比例してすべてのピクセルも増加します）-これは本当の問題とは思えません。

これは2つの理由で本当の問題です。

まず、ほとんどのブラウザーはズームファクターをサイトごとに保存します。視覚障害がある場合、訪問するすべてのサイトで何度も何度もズームする必要があります。ひどい。ウェブデザイナーと開発者のアクセシビリティに対する現在の無関心を考えると、視覚障害者はとにかくそれをしなければなりませんが、これはこのままでいるべきだという意味ではありません。

第二に、あまりにも多くのWebサイトは、ズームしても視覚的にうまく動作しません。レスポンシブWebサイトはうまく機能しますが、レスポンシブWebサイトは水平スクロールまたは何らかの「画面が小さすぎます」動作を示します。

開発者にとって、ズームとテキストスケールには根本的な違いもあります。一方でem手段は、「ユーザーのテキストサイズの好みにそれを調整する」、ズームは、だけでなく、テキストをページ全体をスケールアップまたはダウンについてです。

サイトメニューの例をご覧ください（ページの上部に、リンクが1行に配置されています）。ズームを使用すると、メニューの高さが他の要素に比例して変化することがわかります。テキストサイズオプションでは、動作を決定するのはユーザー次第です。あなたは、視覚障害者が50pxすべての場合にあなたの-heightメニューを見ることができると仮定するかもしれません：誰も白い背景に黒いメニューを見逃さないでしょう。または、たとえば、その高さをテキストに比例したままにすることもできます1.5em。

emsのポイントは、Webページのすべての測定値を基本フォントサイズで定義することです

これは私の側の用語の誤解かもしれませんが、明確にするために：em「現在の要素の」フォントサイズに相対的です。remルートフォントサイズに相対的です。

ページをズームしてもフォントが拡大されるだけの古いブラウザの時代にはemが重要だったと思います。

それが私がを使用する理由ではありませんem。実際、相対的な測定単位を使用する場合、ズームの経験は私の心の最後のことです。私の懸念は2つあります。

まず、私は通常、相対的な用語で単純にレイアウトを定義することに興味があります。私の懸念は、私のコンテナが互いに、そしてその中のテキストに関して見栄えがすることです。また、フォントを変更したり、チェーン全体を微調整したりするときは、すべてを手動で再計算して更新し、撮影するプロポーションを維持したくありません。ブラウザに計算をさせます...

第二に、理解できる簡単な用語でフォントサイズを表現したいだけです。私は私のベースフォントを表現した場合ptのとでは、他のすべてremのまたはemの、それは私のために簡単です。デバイスの解像度を知る必要はありませんし、ズームする必要もありません。ブラウザは使用するピクセル数を知っています。どちらもそれについて考える必要はありません。