同じ要素の読み込みポイントが異なると、ピクセルサイズが異なる

Question

読み込まれたルールのセットによって、1つの要素のピクセルサイズが異なる理由を推測していません。明らかに、この要素のフォントサイズは常に6emで、高さは96pxです。しかし、他のルールがロードされた後、同じフォントサイズが高さ86pxに変換されます。ページがどのように私はこれが起こる可能ルールに追跡することができ、完全に

にロードされたときにページが フォントサイズをロードしているとき

フォントサイズ：ここで計算されたスタイルの2つのスナップショットがありますか？ よろしくお願いします。

Answer 1

EMは固定の測定単位ではなく、相対的なサイズです。 "EM"の起源は、文字通り特定フォントの文字 "M"の幅です。デジタルタイポグラフィでは、EMはベースフォントサイズに相対的です。だから、あなたが見ているのは、CSSの "カスケード"な性質の実例です。

ベースフォントは、パーセントまたは固定サイズ（たとえば、12px、14px、100％など）で設定されます。その後、追加のスタイルがロードされると、#TP_splash_screenのフォントサイズ継承元がより小さなものに変更されているため、6emの値が小さくなりました。

この例で考えてみましょう：あなたはbody要素の直接の子である要素として#TP_splash_screenを使用する場合は、あなたのフォントは12ピクセル「Mの12ピクセルの6em（6倍のサイズになります

body{ 
    font-size: 12px; 
} 

#TP_splash_screen{ 
    font-size: 6em; 
} 

.container{ 
    font-size: 10px; 
} 

を"）。 container要素の子要素として#TP_splash_screenを使用すると、フォントは6px（10px "M"の6倍）になります。

EMは柔軟で反応性のあるレイアウトを扱うための優れた測定単位ですが、測定単位は固定されていません。