emでのメディアクエリがベースフォントサイズの影響を受けていない

Question

異なるベースフォントサイズを設定してもメディアクエリのEM値に影響を与えない理由を理解しようとしています。

デフォルトのベースフォントサイズが16pxで動作していますが、残りのコンテンツは正常に反応します。

それを自分で試してみてください：PXで

メディアクエリ： https://jsfiddle.net/sebtp/n8x0tuvq/5/ [OK] EMで

メディアクエリ： https://jsfiddle.net/sebtp/n8x0tuvq/7/ [NOT OK] REMで

メディアクエリ： https://jsfiddle.net/sebtp/n8x0tuvq/10/ [NOT OK]

html { 
    font-size: 62.5%; /*setting the base font size to 10px*/ 
} 

body { 
    background: white; 
} 
span { 
    font-size:6em; /* 60px, as it should */ 
} 

@media only screen and (min-width: 30em) { /* 480px, should be 300px */ 
    body { 
    background:red; 
    } 

@media only screen and (min-width: 40em) { /* 640px should be 400px */ 
    body { 
    background:cyan; 
    } 

    @media only screen and (min-width: 50em) { /* 800px should be 500px */ 
    body { 
    background:yellow; 
    } 

Answer 1

htmlルールで定義されたフォントサイズに比例しているフォントサイズを取得するには、レム単位ではなく、emを使用する必要があります。 emは、要素自体に相対的であり、font-size定義がない場合、font-size定義を持つ親/次の祖先（ブラウザのデフォルト設定BTWでも定義できます）にあります。

OPのコメントの後ADDITION：

興味深い：あなたがパーセントでhtmlフォントサイズを定義しているので、明らかにブラウザが（それはレムユニットを派生元）ルートのサイズとその内部のデフォルト設定を処理するために続けています。あなたはpx設定にhtmlルールでフォント設定を変更する場合は、rem単位はフォントサイズに関する応じて対応しますが、ブラウザは、まだ少なくとも（を測定する水平のためのデフォルトのフォントサイズ（16pxに）を使用し続けますFirefoxで）。ここを見て（12ピクセルの設定とCSSルールのコメントを見て）：https://jsfiddle.net/zwc00gtk/2/

ONE MORE ADDITION：「通常の」水平測定するための

、レムユニット次の例では、期待通りに動作しますライトグリーンの背景と.wrap DIVは、フォント場合480PXとして計算されるwidth: 40rem、に設定されている - htmlにサイズが12pxに設定され、さらには400ピクセルとなるhtmlのフォントサイズである62.5%（= 10pxの）

https://jsfiddle.net/n2dww2mt/1/

したがって、ユニットとして16px以外のものを受け付けないメディアクエリのみです...