CSS のフォント サイズ - % または em?
https://stackoverflow.com/questions/132685
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
CSS でフォントのサイズを設定するとき、パーセント値を使用する必要があります (%） または em?利点を説明してもらえますか？
解決
ウェブタイポグラフィに関する非常に優れた記事があります 別のリスト.
彼らの結論は次のとおりです。
EMSのサイジングテキストとラインハイトは、ボディに指定されたパーセンテージ（およびSafari 2のオプションの警告）が、今日の一般的なすべてのブラウザで正確で繰り返しのテキストを提供することが示されました。これは、キットバッグに入れて、デザイナーと読者の両方を満足させるCSSのサイジングテキストのベストプラクティスとして使用できる手法です。
他のヒント
から http://archivist.incutio.com/viewlist/css-discuss/1408
%:一部のブラウザは、フォントサイズのパーセントを処理しませんが、150％を150pxと解釈します。（たとえば、一部のNN4バージョン）IEには、ネストされた要素の割合にも問題があります。IEは、親要素に対してではなく、ビューポートに対して比較的パーセントを使用しているようです。さらに別の問題（W3C仕様に従って正しいが）、Moz/NS6では、指定された高さ/幅のない要素と比較してパーセントを使用することはできません。
em:ブラウザは間違った参照サイズを使用する場合がありますが、相対ユニットの問題は最小の問題です。しかし、それは時々PXと解釈されると思うかもしれません。
ポイント:解像度間で大きく異なり、表示に使用しないでください。しかし、印刷の使用は非常に安全です。
ピクセル:画面上の唯一の信頼できる絶対ユニット。しかし、1つのポイントが通常数ピクセルで構成されているため、すべてがばかげて小さくなるため、印刷物で誤って解釈される可能性があります。
どちらもフォント サイズを元のサイズに合わせて調整します。1.5em は 150% と同じです。唯一の利点は読みやすさであると思われるので、最も快適なものを選択してください。
(ほぼ?) すべてのブラウザがテキストだけでなくページ全体のサイズを変更するようになったということを考えると、以前の問題は px 対 % 対 emアクセシブルなフォントのサイズ変更という点では、あまり意味がありません。
したがって、答えはおそらくそれは問題ではないということです。自分に合ったものを使ってください。
%相対的なサイズ変更が可能なので便利です。
pxこれを使用すると、期待を管理するのがかなり簡単になるため、これは素晴らしいことです。
emテキスト サイズに関連した比例的なサイズ変更が可能になるため、レイアウト要素にも使用すると便利です。
本当の違いは、フォント サイズ以外で使用すると明らかです。設定 padding の 1em と同じではありません 100%. em は常にフォント サイズを基準とします。しかし % フォントサイズ、幅、高さ、そしておそらく私が知らないその他のことに関連している可能性があります。
CSSユニットの違いについて % そして em.
私が理解している限り (少なくとも理論的/概念的には、ただしこれら 2 つのユニットがブラウザーでどのように実装されるかについてはおそらくそうではありません)、これら 2 つのユニットは同等です。を掛け合わせると em との値 100 そして交換してください em と % それは同じはずですか？
実際に em と % の間に実際の違いがある場合、誰かがそれを説明 (または説明へのリンクを提供) できますか?
(私のこのコメントを、本来あるべき場所に追加したかったのです。答えのすぐ下にインデントされています "Liam, answered Sep 25 '08 at 11:21" 私も彼の回答が反対票を投じられた理由を知りたいのですが、そこにコメントを投稿する方法がわからなかったので、この「スレッドグローバル」返信を書かなければなりませんでした）
Galwegian 氏が述べているように、ページ上で行う他の操作はほとんどコンピューターのモニターを参照してレイアウトされるため、Web タイポグラフィーには px が最も信頼できます。絶対サイズの問題は、 いくつかの ブラウザ (IE) は Web ページ上のピクセル値要素を拡大縮小しないため、 ズーム in/out、それらの要素を除いてすべてが調整されます。
IE8 がこれを適切に処理するかどうかはわかりませんが、他のすべてのブラウザ ベンダーはピクセルを問題なく処理しており、ユーザーがテキストを拡大/縮小する必要があるケースはまだ少数です (SO のこのテキスト ボックスはおそらく例外です)。どうしてもやりたい場合は、テキスト サイズを大きくするための JavaScript 関数をいつでも追加し、ユーザーに「小さい」/「大きい」ボタンを提供できます。
Yahoo ユーザー インターフェイス ライブラリ (http://developer.yahoo.com/yui/) には、サイトを表示するための基礎がすべての (サポートされている) ブラウザーで同じになるように、ブラウザー固有の設定を「リセット」するために使用される優れた基本 CSS クラスのセットが含まれています。
YUI ではパーセンテージを使用することになっています。
