CSSメディアでEMを使用する方法JavaScriptイベントと一致するクエリ？

Question

私はしばらくの間プロジェクトに取り組んでおり、emを使用していると、長さを表現すると、事実上のユニットとなりました。

普段進行方法は、所望のPXサイズと1EMに他のすべての要素に体とHTML要素を設定することです。その後、残りはすべてemにあります。今朝までこれは良い計画のように思えました。のメディアクエリは、ベースのボディとhtmlpxの値を考慮していないようです。実際には、ブラウザのデフォルトのフォントサイズを使用するように見えますが、これは非常に奇妙な動作です。私もこれを確認していると思われるthis articleが見つかりました。

私は、まさにこの挙動を示している小さなJsFiddle例行っている：実験はシンプルで、デフォルトではテーブルが50emまで「」の値を示して

https://jsfiddle.net/5dq3kq2t/2/

html, body { 
    font-size: 20px; 
} 

* { 
    font-size: 1em; 
} 

#divOf50Em { 
    width: 50em; 
    border: solid 1px red; 
} 

#cell2 { 
    display: none; 
} 

@media screen and (min-width: 50em) { /* 1000px, in theory (50 * 20px) */ 
    #cell1 { 
    display: none; 
    } 

    #cell2 { 
    display: table-cell; 
    } 

} 

を分の幅メディアサイズが満たされています。値「」が表示されます。また、サイズが50emのdivを配置し、動作をトリガーするタイミングを示し、CSSがメディアクエリーの外で動作することを確認しました。

あなたは、この実験の出力のサイズを変更する場合は、2つの値の間のずれが50em * 20ピクセルある1000px値で起こるが、それは、それはで行わないことを期待します800px50em * 16px（デフォルトのブラウザfont-size - これがデフォルトのサイズの場合は）。

私ははっきりとこれがなぜ起こるかがわからないんだけど、私は二つの質問があります。

1. をこれを回避する方法があります（たとえば、CSSの観点から、デフォルトのブラウザのフォントサイズ を上書き）
2. ない場合JavaScriptのブラウザのデフォルトの フォントサイズにアクセスする方法はありますか？私はこの情報を見つけることができませんでした。

それ以外の場合は、メディアの幅とEM Sを使用した場合、我々は、ブラウザのフォントサイズは、常にに16pxになることを頼ることができないので、いくつかの行動のためのメディアクエリで整列されるだろうスクリプトが不可能であるように見えます。

これが当てはまる場合、私の最後の質問は、メディアクエリとJavaScriptをピクセルに戻さずに整列させる方法でしょうか？私は静的なピクセルより相対的な単位を好む、彼らは通常、スタイリングをはるかに簡単にします。より多くの研究の後

Answer 1

、

1. CSSやJavaScriptのいずれか1em value = browser default font-size in pixelを上書き周りに方法がないように見えます。
2. メディアクエリは、ブラウザを参照していますが、通常の/期待される動作のように見えるHTML要素ではありません。
3. ブラウザのデフォルトのフォントサイズをピクセル単位で取得することは、JavaScriptを使用することで可能になります。私は、それがストップギャップに過ぎないと考えていません。
4. 実際のソリューションでは、すべてのメディアクエリをJavaScriptで上書きする必要があります。これは、非常に重くてスケールが難しくなります。
5. 他のユニットを使用すると、いくつかの課題が解決されるかもしれませんが、今日までクロスブラウザの互換性の問題が発生する可能性があります。

Answer 2

可能な回避策がgetComputedStyle

:root, body { 
    --size: 20px; 
    --opt: 50rem; 
    --def: 1rem; 
    font-size: var(--size); 
} 

* { 
    font-size: var(--def); 
} 

#divOf50Em { 
    width: var(--opt); 
    border: solid 1px red; 
} 

#cell2 { 
    display: none; 
} 

window.onload = function() { 
    document.getElementById('documentWidth').innerHTML = 'Window width: ' 
    + document.documentElement.clientWidth + 'px'; 

    var n = 50; 

    var fontSize = parseInt(getComputedStyle(document.getElementById("divOf50Em")) 
       .getPropertyValue("font-size")); 

    var css = `@media screen and (min-width:${fontSize * n}px) { 
       /* 1000px, in theory (50 * 20px) */ 
       #cell1 { 
       display: none; 
       } 

       #cell2 { 
       display: table-cell; 
       } 
      }`; 

    var style = document.createElement("style"); 
    style.textContent = css; 
    document.head.appendChild(style); 

    window.addEventListener('resize', function() { 
    document.getElementById('documentWidth').innerHTML = 'Window width: ' + 
     document.documentElement.clientWidth + 'px'; 
    }); 
} 

plnkr http://plnkr.co/edit/lncvWwBWc18C76UYhPnf?p=preview

を使用して bodyの子ノードの font-sizeを取得することにより、 windowの loadイベントでメディアクエリを設定することです