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

我正在寻找一种可靠的方法，使用javascript以em为单位获得窗口的宽度。我很惊讶地看到jQuery只返回像素测量结果。感谢您的帮助。

这似乎有效：

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

---

可以计算它，但是

em

不是像

px

那样的“简单”单位，因为它取决于字体选择（即，字体系列、样式（粗体、斜体等）和字体大小的组合）。当然，字体大小本身也可以是相对的（例如，如果您为字体指定了

em

、

ex

或百分比大小，则该字体的计算高度

px

来自父元素的大小）

要获取页面的

em

宽度，可以执行如下转换（警告：psuedocode）：

---

简单，因为我们知道

1em=16px

var window_width_em = 1/16 * window_width_px;

---

对于那些需要将所有这些放在一起的人，此代码适用于我：

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

窗口大小：像素或ems

window.onresize=函数（）{ document.getElementById（“width_px”）.innerHTML=window.innerWidth； document.getElementById（“width_ems”）.innerHTML=window.innerWidth/parseFloat（$（“body”）.css（“font size”）； };

---

它是使用上面添加到链接教程中的答案组合而成的

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

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

---

em与字体的大小有关。如果您的字体大小是12像素，那么窗口的宽度除以12将得到相等的em值。这将取决于你希望它是什么字体，相对于假设1em是16像素是错误的。Em单位与元素的级联字体大小有关。添加css

html{font size:10px；}

或

html{font size:1.5em；}

将导致1em！=16px。开发人员无法控制的另一个事实是，“标准16px字体大小”由用户代理设置，用户可以随心所欲地更改。无论您否决了多少我的答案，这个答案仍然是错误的：）对于那些依赖字体大小%和媒体查询的用户，将$（“body”）.css（“font size”）更改为$（“html”）.css（“font size”）在ems中获得最准确的窗口宽度。这种方法的优点是它变得非常灵活，因为可以将$（window）.width（）更改为任何目标。这非常好。我已经找了一个小时了。+1-不会有什么不同，但是

html

比

body

更正确，因为em采用根字体大小，这是html的跨浏览器兼容性var width=window.innerWidth | document.documentElement.clientWidth | document.body.clientWidth；然后将宽度除以parseFloat（如上所示）。谢谢你的发帖！

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