Ist es möglich, die Breite des Fensters in em-Einheiten mit Javascript zu erhalten?

Question

Ich suche nach einem zuverlässigen Weg, um die Breite des Fensters in em-Einheiten mit Javascript zu erhalten. Ich war überrascht zu sehen, dass jQuery nur ein Ergebnis in Pixelmessungen zurückgibt. Jede Hilfe wird geschätzt.

Answer 1

Dies scheint zu funktionieren:

$(window).width()/parseFloat($("body").css("font-size")); 

Answer 2

Es ist möglich, es zu berechnen, aber em ist kein „einfacher“ Einheit wie px weil es auf einer Schriftauswahl abhängt (dh eine Kombination von Schriftfamilie , Stil (fett, kursiv usw.) und Schriftgröße). Natürlich kann die Schriftgröße selbst relativ sein (z. B. wenn Sie einer Schriftart eine em, ex oder eine prozentuale Größe geben, dann wird die berechnete px Höhe für diese Schriftart von der Größe des Elternelements abgeleitet).

Um die em Breite einer Seite erhalten Sie die Konvertierung wie dies tun könnte (Warnung: psuedocode):

// For this to work reliably, size should be in px, pt, or mm. 
function getWindowWidthInEm(fontFamily, style, size) { 
    var box = document.createElement("span"); 
    box.innerText = "M"; 
    box.style.fontFamily = fontFamily; 
    box.style.fontSize = size; 
    box.style.fontWeight = style is bold; 
    box.style.fontStyle = style is italic; 

    var body = document.getElementsByTagName("body")[0]; 
    body.appendChild(box); 

    var emInPx = box.getComputedStyle().width; 

    body.removeChild(box); 

    var windowPx = window.width; 
    return windowx/emInPx; 
} 

Answer 3

einfach, da wir 1em = 16px

var window_width_em = 1/16 * window_width_px; 

Answer 4

Für diejenigen wissen, die es brauchen alles zusammen, funktioniert dieser Code für mich:

<p>Window size: <span id="width_px"></span> pixels or <span id="width_ems"></span> ems</p> 
<script> 
    window.onresize = function() { 
    document.getElementById("width_px").innerHTML = window.innerWidth; 
    document.getElementById("width_ems").innerHTML = window.innerWidth/parseFloat($("body").css("font-size")); 
    }; 
</script> 

Es ist PU t zusammen mit der obigen Antwort hinzugefügt, um die window-width test code im verknüpften Tutorial gefunden.

Answer 5

Hier ist eine Lösung, die jQuery nicht benötigt und keine explizite Erklärung der Schriftgröße benötigt.