css - em ベースのレイアウトの問題

Question

すべての寸法が em で指定されている css を使用してレイアウトを構築しようとしています。これにより、さまざまなフォント サイズ/ズーム レベルでページを同じように表示できるようになるという印象を受けました。ただし、サイズ/ズームが変更されると、テキストの折り返しが異なることに気付きました。

たとえば、この jsfiddleでは、テキストはネイティブ ズームと 1em のフォント サイズで 1 行にすべて表示されますが、2em のフォント サイズで折り返されます。コンテナーの幅が全角であるため、一貫してラップする/ラップしないことが予想されるため、フォントサイズに比例して増加するはずです。

私は何か間違ったことをしていますか、それとも em 測定の有用性を誤解しているだけですか?

Answer 1

あなたはそれを正しく理解しましたが、font-sizeはフォントのを定義しますが、HEIGHTではありませんWIDTH。したがって、emで定義されたコンテナ幅には、異なるズームレベルとフォントサイズで1行に異なる数の文字が含まれます。

フォントを等幅ファミリーに変更すると、後の効果が得られる可能性があると思います。試してみる価値？

Answer 2

フォントサイズ 2em

「2emのフォントサイズ」などというものはありません。Anemは現在のフォント サイズの単位であるため、ステートメントは円形です。ems で定義する必要があるのは、フォント サイズ自体ではなく、マージンとインデントと幅です。