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

【问题标题】：Is it possible to get the width of the window in em units using javascript?是否可以使用 javascript 以 em 为单位获取窗口的宽度？
【发布时间】：2012-08-27 19:13:08
【问题描述】：

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

【问题讨论】：

em 与您的字体大小有关。如果您的字体大小为 12 像素，则窗口宽度除以 12 将为您提供等值的 em 数量。这将取决于您希望它与什么字体相关

标签： javascript jquery media-queries em

【解决方案1】：

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

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

【讨论】：

+1 - 不会产生影响，但html 会比body 稍微更正确，因为 em 采用根字体大小，这就是 html 的
为了跨浏览器兼容性 var width = window.innerWidth ||文档.documentElement.clientWidth ||文档.body.clientWidth;然后将宽度除以 parseFloat（如上所示）。感谢您的发帖！

【解决方案2】：

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

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

它使用上面添加到链接教程中的window-width test code 的答案组合在一起。

【讨论】：

【解决方案3】：

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

var window_width_em = 1/16 * window_width_px;

【讨论】：

假设 1em 为 16 像素是错误的。 Em 单位与元素的级联字体大小有关。添加 css html { font-size: 10px; } 或 html { font-size: 1.5em; } 将导致 1em != 16px。进一步超出开发人员控制的是“标准 16 像素字体大小”由用户代理设置，并且可以由用户随意更改。
这个答案仍然是错误的，不管我的答案有多少你投反对票:)

【解决方案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;
}

【讨论】：

【解决方案5】：

这似乎有效：

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

【讨论】：

对于那些依赖 font-size % 和媒体查询的人，将 $("body").css("font-size") 更改为 $("html").css("font-size" ) 以获得最准确的 ems 窗口宽度。
这种方法的好处是它变得非常灵活，因为可以将 $(window).width() 更改为任何目标。跨度>
这很棒。我已经找了一个小时了。