48

我正在寻找一种可靠的方法来使用 javascript 以 em 为单位获取窗口的宽度。我很惊讶地看到 jQuery 只会返回像素测量结果。任何帮助表示赞赏。

4

5 回答 5

56

这似乎有效：

$(window).width() / parseFloat($("body").css("font-size"));
于 2012-09-03T02:26:20.510 回答
29

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

window.innerWidth / parseFloat(
  getComputedStyle(
    document.querySelector('body')
  )['font-size']
)
于 2017-02-06T06:07:32.517 回答
1

对于那些需要它们的人来说，这段代码对我有用：

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

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

于 2013-11-16T17:00:54.987 回答
0

可以计算它，但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;
}
于 2012-09-03T02:26:42.937 回答
-20

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

var window_width_em = 1/16 * window_width_px;
于 2012-09-03T03:58:22.347 回答