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

Ответ 1

Это работает:

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

Ответ 2

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

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

Ответ 3

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

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

Он собрал, используя ответ выше, добавленный в код проверки ширины окна, найденный в связанном учебнике.

Ответ 4

Можно вычислить его, но 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;
}

Ответ 5

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

var window_width_em = 1/16 * window_width_px;