58

この例では:

CSS

h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }

HTML

<h1>Hi, I am a <span class="smaller">toad</span></h1>

「toad」という単語は、16px (ブラウザの標準フォント サイズ) の 0.5 倍になりますか、それとも 2em (h1 のフォント サイズ) の 0.5 倍になりますか?

4

4 に答える 4

55

これは、それが使用されている要素の「font-size」プロパティの計算値と同じです。継承はドキュメント ツリーを下って実行されます。

あなたの質問に答えると、2em の 0.5 倍になり、h1 の親の計算された font-size の 2 倍になります。ふぅ。

emまたはなどの他の CSS プロパティで使用する場合、結果は、widthまたはなどを適用する要素heightの計算結果から計算されることに注意することも重要です。font-sizewidthheight

次の記事ではem、私の意見では、ユニットの使用とコンテキストについて、他の読み物やリソースと一緒に説明しています...remユニットも多少興味があるかもしれません。

  1. http://www.impressivewebs.com/understanding-em-units-css/
  2. http://snook.ca/archives/html_and_css/font-size-with-rem
  3. http://caniuse.com/rem

このフィドルをチェックして、それがどのように機能するかを少し明確にすることもできます。

http://jsfiddle.net/HpJjt/3/

于 2013-03-15T11:52:47.543 に答える
3

em単位font-sizeは、親要素のフォント サイズを示すプロパティの値で使用される場合を除き、要素のフォントサイズを示します。この意味で、提示されたケースでは、コンテキストは親要素です。

この場合、「toad」という単語のフォント サイズは、親のフォント サイズと同じになりh1ます。与えられたデータから特定の値を推測することはできません。

フォント サイズが計算さh1れると、この構造体が処理されるときに の親のフォント サイズが計算されます。sとしましょう。最初に のフォント サイズh1が計算され、s (親のフォント サイズ) に 2 が掛けられます。次に、span要素のフォント サイズが計算され、その親のフォント サイズに 0.5 が掛けられ、sが得られます。理論的には、丸め誤差はこのようなプロセスで最小の偏差を引き起こす可能性がありますが、コンピューターでは 2 と 0.5 の乗算は正確であると想定できます。

于 2013-03-15T12:25:31.537 に答える
1

コンテキスト内の h1 要素の 2em の 0.5 倍になります。

強制的に 16px を基準にするには、最初に h1 の親を font-size 16px に設定する必要があります。

.wrapper{font-size:16px;} h1 { font-size: 2em; } .smaller { font-size: 0.5em; }

<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>

SO この場合、

  • ラッパーのフォントサイズは 16px
  • h1 の font-size は 16px の 2em です
  • span.smaller の font-size は 1em (h1 から継承された .wrapper (2em の .5em)) で、16px です。

em は、現在のフォントの M 文字の高さに名目上基づいているコンテキストからの相対的な尺度であることに注意してください。すべてのインテントで、h1 のサイズは 32px で、span.smaller のサイズは 16px です。

于 2013-03-15T12:06:33.567 に答える
1

親要素のピクセル サイズによって異なります。親要素のピクセル サイズが 16px の場合

.5emはベース ピクセルの半分に等しいので8px、2emh1 は に等しくなり32pxます。

それはすべて、CSS で親要素のピクセル サイズをどのように設定したかによって異なります。

http://pxtoem.com/

于 2013-03-15T12:10:13.533 に答える