¿Es posible obtener el ancho de la ventana en unidades em usando javascript?

Question

Estoy buscando una forma confiable de obtener el ancho de la ventana en unidades em usando javascript. Me sorprendió ver que jQuery solo devolverá un resultado en mediciones de píxeles. Cualquier ayuda es apreciada.

Answer 1

Esto parece funcionar:

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

Answer 2

Es posible calcular, pero em no es una unidad de "simple" como px porque depende de una selección de fuente (es decir, una combinación de familia tipográfica , estilo (negrita, cursiva, etc.) y tamaño de letra). Por supuesto, el tamaño de fuente en sí puede ser relativo (por ejemplo, si le da a una fuente un em, ex o un porcentaje de tamaño, la altura calculada px para esa fuente se deriva del tamaño del elemento principal).

para obtener el ancho em de una página que podría hacer la conversión como esta (advertencia: 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

simple, ya que sabemos 1em = 16px

var window_width_em = 1/16 * window_width_px; 

Answer 4

Para aquellos que lo necesitan todo junto, este código funciona para mí:

<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 pu t juntos usando la respuesta anterior agregada al window-width test code que se encuentra en el tutorial vinculado.

Answer 5

Aquí hay una solución que no requiere jQuery y no requiere una declaración de tamaño de fuente explícita.

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