Verwendung von EMs in CSS-Medienabfragen mit JavaScript-Ereignissen?

Question

Ich habe an einem Projekt für eine Weile gearbeitet und ich dachte, dass mit em war die de facto Einheit, wenn es darum ging, Länge auszudrücken.

Die Art und Weise in der Regel gehen I ist es, dem Körper und html Elemente auf die gewünschte px Größe und alle anderen Elemente zu 1EM einzustellen. Danach ist der Rest alles in em. Bis heute Morgen schien dies ein guter Plan, bis ich herausfand, dass Medienabfragen scheinen nicht die Basis Körper und html px Wert zu berücksichtigen. Sie scheinen tatsächlich die Standardschriftgröße des Browsers zu verwenden, was ein sehr merkwürdiges Verhalten zu sein scheint. Ich habe auch this article gefunden, was dies zu bestätigen scheint.

Ich habe ein kleines JsFiddle Beispiel getan, was genau dieses Verhalten zeigt:

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; 
    } 

} 

Das Experiment einfach ist, den Wert der Tabelle standardmäßig anzeigen "" bis zum 50emMindestbreite Mediengröße wurde erreicht. Der Wert "" sollte angezeigt werden. Ich legte auch eine div welche Größe ist 50em zu zeigen, wenn das Verhalten ausgelöst werden sollte und auch zu bestätigen, dass das CSS außerhalb von Medienabfragen funktioniert.

Wenn Sie den Ausgang dieses Experiments Größe ändern, würde man erwarten, dass die Verschiebung zwischen den beiden Werten in einem 1000px Wert passieren würde, die ist 50em * 20px, aber es nicht der Fall, kommt es bei 800px Das ist 50em * 16px (die Standard-Browser Schriftgröße - wenn dies Ihre Standardgröße natürlich ist).

bin ich eindeutig nicht sicher, warum dies geschieht, aber ich habe zwei Fragen:

1. Gibt es eine Möglichkeit, diese um (zB Überschreibungs Standard-Browser font-size aus einer CSS-Perspektive)
2. Wenn nicht Gibt es einen Weg in JavaScript, um auf die Standardgröße des Browsers zuzugreifen? Ich konnte diese Informationen nicht finden.

Ansonsten sieht es aus wie ein Skript, das mit Medien-Anfragen für einige Verhaltensweisen ausgerichtet werden würde, ist unmöglich, wenn Medienbreite und em s verwenden, da wir nicht verlassen können, dass die Schriftgröße des Browsers immer 16px sein wird.

Wenn das der Fall ist, meine letzte Frage wäre, gibt es eine Möglichkeit, Medienabfragen und JavaScript auszurichten, ohne auf Pixel zurückzugehen? Ich bevorzuge relative Einheiten gegenüber statischen Pixeln, sie machen das Styling in der Regel viel einfacher.

Answer 1

Nach mehr Forschung,

1. Es sieht aus wie es keine Möglichkeit gibt, die 1em value = browser default font-size in pixel entweder in CSS oder JavaScript um zu überschreiben.
2. Medienabfragen beziehen sich auf den Browser, nicht HTML-Elemente, die das normale/erwartete Verhalten zu sein scheint.
3. Es ist möglich, die Standardschriftgröße des Browsers in Pixel zu erhalten, indem Sie JavaScript verwenden, das ich nicht versuchen werde zu berücksichtigen, dass es nur eine Unterbrechungslücke wäre.
4. Eine echte Lösung würde erfordern, dass alle Medienabfragen von JavaScript überschrieben werden, was ziemlich schwer und schwer zu skalieren wäre.
5. Die Verwendung anderer Einheiten könnte einige Probleme lösen, würde aber bis heute Kompatibilitätsprobleme mit Browsern verursachen.

Answer 2

Eine mögliche Abhilfe ist, die Medienabfrage bei load Fall window zu setzen, indem die font-size eines Kindes Knoten body bekommen 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

mit