【问题标题】: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 那样是“简单”单位,因为它取决于字体选择(即字体系列、样式(粗体、斜体等)的组合)和字体大小)。当然,字体大小本身可以是相对的(例如,如果您为字体指定 emex 或百分比大小,则计算出的该字体的 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() 更改为任何目标。跨度>
      • 这很棒。我已经找了一个小时了。
      猜你喜欢
      • 2018-10-23
      • 2017-03-29
      • 2021-10-05
      • 2012-07-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-04-01
      相关资源
      最近更新 更多