E 'possibile ottenere la larghezza della finestra in em unità usando javascript?

Question

Sto cercando un modo affidabile per ottenere la larghezza della finestra in unità em utilizzando javascript. Sono rimasto sorpreso nel vedere che jQuery restituirà solo un risultato nelle misure dei pixel. Qualsiasi aiuto è apprezzato.

Answer 1

Questo sembra funzionare:

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

Answer 2

E 'possibile calcolare, ma em non è un'unità "semplice" come px perché dipende da una selezione dei font (vale a dire, una combinazione di famiglia di caratteri , stile (grassetto, corsivo, ecc.) e dimensione carattere). Ovviamente la dimensione del carattere stesso può essere relativa (ad esempio se si attribuisce un font a , ex o in percentuale, l'altezza calcolata di px per quel tipo di carattere viene ricavata dalle dimensioni dell'elemento principale).

per ottenere la larghezza em di una pagina che si possa fare la conversione in questo modo (attenzione: psuedocodarlo):

// 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

semplice, dal momento che sappiamo 1em = 16px

var window_width_em = 1/16 * window_width_px; 

Answer 4

Per chi ne ha bisogno tutto messo insieme, questo codice funziona per me:

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

È pu insieme usando la risposta sopra aggiunta al window-width test code trovato nel tutorial collegato.

Answer 5

Ecco una soluzione che non richiede jQuery e non richiede una dichiarazione di dimensione carattere esplicita.

window.innerWidth/
    parseFloat(getComputedStyle(document.querySelector('body'))['font-size'])