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

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 medidas de píxeles. Cualquier ayuda es apreciada.

preguntado el 03 de septiembre de 12 a las 03:09

em es relativo al tamaño de sus fuentes. Si el tamaño de su fuente es de 12 px, entonces el ancho de la ventana dividido por 12 le dará la cantidad de em equivalente. Dependerá de la fuente con la que quieras que sea relativo:

5 Respuestas

Esto parece funcionar:

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

Respondido el 03 de Septiembre de 12 a las 03:09

Para aquellos que confían en el porcentaje de tamaño de fuente y las consultas de medios, cambie $("cuerpo").css("tamaño de fuente") a $("html").css("tamaño de fuente") para obtener un ancho de ventana más preciso en ems. - ontananza

Lo bueno de este enfoque es que se vuelve extremadamente flexible, ya que uno puede cambiar el $(ventana).ancho(), a cualquiera que sea el objetivo. - Klewis

ESTO ES GENIAL. He estado buscando esto durante una hora. - salep

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

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

respondido 27 mar '19, 14:03

+1 - no hará la diferencia pero html sería algo más correcto que body para em toma el tamaño de fuente raíz y eso es html - m02ph3u5

Para compatibilidad con navegadores cruzados, var width = window.innerWidth || documento.documentElement.clientWidth || documento.cuerpo.clientWidth; y luego divida el ancho por parseFloat (como se muestra arriba). ¡Gracias por tu publicación! - harvey mushman

Para aquellos que 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 usando la respuesta anterior agregada a la código de prueba de ancho de ventana que se encuentra en el tutorial vinculado.

respondido 16 nov., 13:17

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 fuente). Por supuesto, el tamaño de la fuente en sí puede ser relativo (por ejemplo, si le da a una fuente un em, ex, o tamaño porcentual, entonces el calculado px la altura de esa fuente se deriva del tamaño del elemento principal).

Para obtener el em ancho de una página, podría 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;
}

Respondido el 03 de Septiembre de 12 a las 03:09

Sencillo, ya que sabemos 1em = 16px

var window_width_em = 1/16 * window_width_px;

Respondido el 03 de Septiembre de 12 a las 04:09

Asumir que 1em tiene 16 px es engañosamente incorrecto. Las unidades em son relativas al tamaño de fuente en cascada de un elemento. Agregando el css html { font-size: 10px; } or html { font-size: 1.5em; } resultaría en 1em != 16 píxeles. Más allá del control de los desarrolladores está el hecho de que el agente de usuario establece el "tamaño de fuente estándar de 16 píxeles" y puede ser cambiado por el usuario a su antojo. - trognanders

Esta respuesta sigue siendo incorrecta, no importa cuántas de mis respuestas vote negativamente :) - trognanders

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.