Можно ли получить ширину окна в единицах em с помощью javascript?

Question

Я ищу надежный способ получить ширину окна в единицах em с помощью javascript. Я был удивлен, увидев, что jQuery вернет результат измерениям пикселей. Любая помощь приветствуется.

Answer 1

Это похоже на работу:

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

Answer 2

Это можно вычислить, но em не «простой» блок, как px, потому что это зависит от выбора шрифта (то есть, сочетание гарнитуры семьи , стиль (жирный, курсив и т. д.) и размер шрифта. Конечно, сам размер шрифта может быть относительным (например, если вы даете шрифт em, ex или процентный размер, тогда вычисленная высота px для этого шрифта выводится из размера родительского элемента).

Чтобы получить em ширину страницы, вы можете сделать преобразование, как это (предупреждение: 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

Простой, так как мы знаем 1em = 16px

var window_width_em = 1/16 * window_width_px; 

Answer 4

Для тех, кто в ней нуждается все это вместе, этот код работает для меня:

<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 t вместе, используя ответ выше, добавленный в window-width test code, найденный в связанном учебнике.

Answer 5

Вот решение, которое не требует jQuery и не требует явного объявления размера шрифта.

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