タイポグラフィにおけるem VS px VS%に関する議論はまだ有効ですか


8

タイポグラフィでemがpxよりも優れている理由についての記事をいくつか読んでいます。そして、ベースは%でなければなりませんbody{ font-size:62.5%; }

私が見つけることができるより良い記事の1つはここにあります:http : //kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

基本的に、pxはウェブサイトやデバイスで適切にスケーリングされないと言われています。私はいつもpxでタイポグラフィを行っており、問題を発見したことがありません。私はまた、いくつかのCSSフレームワークといくつかのワードプレスのテーマを使用しており、通常のpxのみが使用されていることを常に確認しています。

今、ほとんどの記事がemで書かれていることがわかります。ほとんどが数年前のものです。pxが適切にスケーリングされないことがまだ本当であるか、それとも最近のブラウザーやデバイスではこれが重要ではないのかを知りたかったのです。 。


サイドノート。私はいくつかのサイトを読んで見たことがありますが、人々はこれまでにすべてのスタイリングをemで行っています。たとえば、パディングとマージンはemで行われます。

これは、適切なスケーリングWebサイトが必要な場合に必要ですか。


2
物事をさらに混乱させるために、最近のほとんどのブラウザは、相対的なemsまたはremsをサポートしていますsnook.ca/archives/html_and_css/font-size-with-rem
paulmorriss、2011年

StackOverflowの上より最近の、より良い答えがあります:stackoverflow.com/questions/11799236/...
デニス・デ・Bernardy

回答:


3

私の答えは、テキスト自体が明確な「ノー」だからです。優れたブラウザは、ピクセル単位で指定されたフォントのスケーリングに関して、(必要に応じて)カンニングをします。Web開発者は、コンテンツがレンダリングされるデバイスの違いにとらわれないようにする必要があります。

w3Schools Tryitエディターでこれを試してください:

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

次に、Ctrlキーを押しながらマウスホイールでスクロールするか、Ctrl-Numeric +を押します。これらはすべて、適切なブラウザで均等にスケーリングする必要があります。

解像度が常に96DPIであるという点を除き、ピクセルの幅が均一であることは保証されておらず、すべてのコンテンツの拡大または縮小にユーザー設定が適用される場合があります。それを念頭に置いて、ほとんどのブラウザはこれらの解像度の違いを考慮に入れ、特定のハードウェア/設定に従って出力をスケーリングします。ブラウザーが実際のピクセル単位を厳密に適用する場合、ブラウザー(またはブラウザーが実行されるハードウェアデバイス)は、エンドユーザーによる障害として認識される運命にあります。

そうは言っても、HTMLはスケーリング用に最適化されているのではなく、可能な限り広い範囲の解像度アスペクト比(幅を高さで割ったもの)にテキストをリフローするために最適化されていることを覚えておいてください。ブラウザは、異なる単位で指定された場合、スケーリングパディングとマージンが異なります。本当にスケーラブルなデザイン(たとえば、背景上の位置が重要な場合)では、SVGなどのスケーラブルでフローしない形式の使用を検討する必要があります。パーセンテージでパディングとマージンを行うことは常に危険です!

画像の背景などを使用していて、パディングまたはマージンを特定のピクセル数の内側にしたい場合は、これらのマージンとパディングをピクセル単位で指定することをお勧めします。


1
注意点-IEの「テキストサイズ」機能は、ptまたはを使用して明示的に修正されたフォントをスケーリングしませんpx
Zhaph-Ben Duguid 2012年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.