このフォントを説明してくださいサイジング構造

Question

私が見ている主要なサイトのCSSには、CSSのフォントサイズを管理する奇妙な方法があります。まず、ボディセレクタは、これを持っている：

body { 
font:62.5%/1.5 Helvetica,Arial,FreeSans,sans-serif; 
} 

その後、後に彼らはH2フォントのためのカスタムサイズを取得する：あなたがこれらの場所のいずれかでフォントのディレクティブを変更した場合

h2 { 
font-size:3em; 
} 

を、 h2のフォントサイズが変更され、正しく表示されません。だから彼らは明らかにこれらのディレクティブの組み合わせを介して、フォントサイズを管理している、と私は、彼らはそれをこのように行うと理由を知りたい....

質問：

1. なぜH2フォントではありません単純にボディフォントをオーバーライドしていますか？それはボディフォントがそのサイズ上の乗数として機能しているようです....

2. このデザインの動機は何ですか？体のフォントに乗って上-

おかげで、 ヨナ

Answer 1

はなぜH2フォントは、単純ではないのですか？これは、ボディフォントがそのサイズ上の乗数として機能するようなものです。

emは相対的な単位です。したがって、基底サイズの62.5％の3 emは、<h2>エレメントの基底サイズの187.5％を意味します。

このデザインの動機は何ですか？ ％があまりに測定の相対的な単位である - - body要素のパーセント値を設定

があることを意味し、ユーザーは自分のブラウザのテキストサイズ設定を使用してページ全体にテキストのサイズを変更することができます。私は62.5％のような値は、ブラウザのデフォルトのフォントサイズが本体全体のコピーを大きくしすぎる場合があると思います（これはbody要素に適用されています）。私のサイトは90％を使用していますが、それはそれほど小さくはありませんが、あなたはそのアイデアを得ます。

Answer 2

1emは、デフォルトのフォントサイズと同じです。ブラウザのデフォルトのテキストサイズは16ピクセルです。あなたがデフォルトを変更しない限り、それはです。

ここで、デフォルトはブラウザのデフォルトの62.5％と定義され、行の高さは1.5です。

3emはデフォルトサイズの3倍です。

ボディのデフォルトを変更すると、デフォルトサイズの3倍のh2タグを含むemサイズ単位が使用されるすべての場所に影響します。

Answer 3

通常、ブラウザは16pxのデフォルトフォントサイズを定義します。しかし、それは相対的な単位です。あなたが62.5％に設定することにより、したがって

1 em = 1 times 16px = 16px 
1.5 em = 1.5 times 16px = 24px 
2 em = 2 times 16px = 32px 

のコンテナ/ DIVの設定フォントサイズを持っているのであれば、たとえば、それは10pxのデフォルトをご参照のフォントサイズにまで減少します。

理にかなって、なぜベースサイズ62.5を作ること、あなたがPXであなたのフォントサイズを視覚化しているときに、この技術は簡単にそれを作る

1 em = 10px 
1.5em = 15px 
2em = 20px