web-dev-qa-db-ja.com

タイポグラフィにおけるem VS px VS％についての議論はまだ有効ですか

タイポグラフィでemがpxよりも優れている理由についての記事をいくつか読んでいます。そして、ベースは％である必要があり、最良はbody{ font-size:62.5%; }を持つことです。

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

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

今では、ほとんどの記事はほとんど何年も前に書かれたものであることがわかります。pxがうまくスケールしないことはまだ真実か、それとも現代のブラウザやデバイスにとってこれがもはやポイントではないかを知りたい。

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

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

website-designtypography
8
Saif Bechan

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

W3Schoolsでこれを試してください Tryit editor ：

<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 などのスケーラブルな非フロー形式の使用を検討する必要があります。パーセンテージでパディングとマージンを行うことは常に危険です！

画像の背景などを使用していて、パディングまたはマージンを特定のピクセル数だけ内側にしたい場合は、ピクセル単位でそれらのマージンとパディングを指定するようにしてください！

3
Louis Somers