使用JavaScript获取窗口宽度的em单位，这是否可能？

Question

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

- mw1

---

em与你的字体大小有关。如果你的字体大小为12像素，那么窗口宽度除以12将给出相应的em值。这将取决于你希望把它与哪种字体相关联。 - kmb64

Answer 1

这似乎可以工作：

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

- mw1

---

如果依赖字体大小百分比和媒体查询，请将$("body").css("font-size")更改为$("html").css("font-size")，以获得最准确的em窗口宽度。 - ontananza

这种方法的好处在于它非常灵活，因为可以将 $(window).width() 更改为任何目标。 - klewis

Answer 2

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

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

- Brad

---

「+1」并不会有任何影响，但是使用「html」比使用「body」在某种程度上更加正确，因为em取决于根字体大小，而根字体大小是由html确定的。 - m02ph3u5

为了实现跨浏览器兼容性，可以使用以下代码：var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 然后按照上面所示的方法将width除以parseFloat()。谢谢您的发布！ - Harvey Mushman

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>

它是通过将上面的答案与链接教程中找到的窗口宽度测试代码相加而组合在一起的。

- bofa

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

- Dai

Answer 5

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

var window_width_em = 1/16 * window_width_px;

- Rezigned

---

假设1em等于16像素是具有误导性的不正确说法。Em单位是相对于元素的级联字体大小而言的。添加CSS html {font-size: 10px;}或 html {font-size: 1.5em;} 会导致1em 不等于 16像素。进一步地，开发人员无法控制标准的“16像素字体大小”，因为它是由用户代理设置的，并且可以被用户随意更改。 - le3th4x0rbot

无论你对我的答案进行多少次踩，这个回答依然是错误的 :) - le3th4x0rbot