是否可以使用javascript获取以em为单位的窗口宽度

Is it possible to get the width of the window in em units using javascript?

本文关键字：为单位 窗口 em 可以使 javascript 获取 是否      更新时间：2023-09-26

我正在寻找一种可靠的方法来使用JavaScript获得以em为单位的窗口宽度。我惊讶地发现jQuery只会返回像素测量的结果。

这似乎有效：

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

这里有一个不需要jQuery的解决方案，也不需要显式的字体大小声明。

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

对于那些需要将其全部组合在一起的人，以下代码对我有效：

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

它是使用上面添加到链接教程中的窗口宽度测试代码中的答案组合在一起的。

可以计算它，但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;
}

简单，因为我们知道1em = 16px

var window_width_em = 1/16 * window_width_px;
相关文章：