是否有可能得到使用javascript em单位的窗口的宽度？(Is it possible to

我在寻找一个可靠的方式使用JavaScript来获取窗口的宽度em单位。 我很惊讶地看到，jQuery将只在像素测量返回结果。 任何帮助表示赞赏。

Answer 1:

这似乎工作：

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

Answer 2:

下面是不需要的jQuery的解决方案，并且不需要一个明确的字体大小声明。

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

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

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

Answer 4:

这是可能来计算的话，但是em是不是像一个“简单”的单位px ，因为它取决于字体选择（即，字体系列，样式（粗体，斜体等），和字体大小的组合）。 当然，（如果你给一种字体例如，字体大小本身可以是相对的em ， ex ，或百分比大小，则计算出的px为字体高度从父元素的大小得出）。

要获得em页面的宽度，你可以做这样的转换（警告：伪代码）：

// 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 5:

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

var window_width_em = 1/16 * window_width_px;

文章来源: Is it possible to get the width of the window in em units using javascript?