tamaño - ¿Es posible obtener el ancho de la ventana en unidades em usando javascript?

obtener resolucion javascript

Question

Estoy buscando una manera 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

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''])

Answer 2

Es posible calcularlo, pero em no es una unidad "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, entonces la altura de px calculada para esa fuente se deriva del tamaño del elemento principal).

Para obtener el ancho de una página, puede hacer la conversión de esta manera (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

Esto parece funcionar:

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

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>

Se arma utilizando la respuesta anterior agregada al código de prueba de ancho de ventana que se encuentra en el tutorial vinculado.

Answer 5

Simple, ya que sabemos 1em = 16px

var window_width_em = 1/16 * window_width_px;