如何在CSS媒体查询中使用EM与JavaScript事件对齐？

Question

我一直在研究一个项目，我认为在表达长度时，使用em是事实上的单位。

我通常采用的方法是将body和html元素设置为所需的px大小，将所有其他元素设置为1em。 在那之后剩下的就是他们 。 直到今天早上，这似乎是一个很好的计划，直到我发现媒体查询似乎没有考虑基体和html px值。 实际上它们似乎采用浏览器的默认字体大小，这似乎是一种非常奇怪的行为。 我也发现这篇文章似乎证实了这一点。

我做了一个小的JsFiddle示例，它显示了这种行为：

https://jsfiddle.net/5dq3kq2t/2/

html, body {
    font-size: 20px;
}

* {
  font-size: 1em;
}

#divOf50Em {
  width: 50em;
  border: solid 1px red;
}

#cell2 {
  display: none;
}

@media screen and (min-width: 50em) { /* 1000px, in theory (50 * 20px) */
  #cell1 {
    display: none;
  }

  #cell2 {
    display: table-cell;
  }

}

实验很简单，默认情况下，表格显示值“ 1 ”，直到满足50em 最小宽度的介质尺寸。 应显示值“ 2 ”。 我还放置了一个大小为50em的div来显示何时应该触发行为，并确认CSS在媒体查询之外工作。

如果调整这个实验的输出，你会认为这两个值之间的转变将在1000像素值是50em * 20像素的发生，但它不，它发生在800像素是50em * 16像素 （默认浏览器字体-size - 如果这是你当前的默认大小）。

我显然不确定为什么会这样，但我有两个问题：

1. 有没有办法解决这个问题（例如从CSS角度覆盖默认浏览器字体大小）
2. 如果没有，JavaScript中有没有办法访问浏览器的默认字体大小？ 我无法找到这些信息。

否则，当使用媒体宽度和em时，看起来有一个与媒体查询对齐某些行为的脚本是不可能的，因为我们不能相信浏览器的字体大小总是16px 。

那么如果是这种情况，我的最后一个问题是，有没有办法在不回到像素的情况下调整媒体查询和JavaScript？ 我更喜欢静态像素的相对单位，它们通常使样式更简单。

Answer 1

经过更多的研究，

1. 看起来无法用CSS或JavaScript覆盖1em value = browser default font-size in pixel的1em value = browser default font-size in pixel 。
2. 媒体查询指的是浏览器，而不是HTML元素，这似乎是正常/预期的行为。
3. 可以使用JavaScript获取浏览器的默认字体大小，我不会尝试将其视为止损。
4. 一个真正的解决方案将要求所有媒体查询被JavaScript覆盖，这将变得非常沉重且难以扩展。
5. 使用其他单元可能会解决一些挑战，但到目前为止会导致跨浏览器兼容性问题。

Answer 2

一种可能的解决方法是通过使用getComputedStyle body的子节点的font-size ，在window的load事件中设置媒体查询

:root, body {
    --size: 20px;
    --opt: 50rem;
    --def: 1rem;
    font-size: var(--size);
}

* {
  font-size: var(--def);
}

#divOf50Em {
  width: var(--opt);
  border: solid 1px red;
}

#cell2 {
  display: none;
}

window.onload = function() {
  document.getElementById('documentWidth').innerHTML = 'Window width: ' 
    + document.documentElement.clientWidth + 'px';

  var n = 50;

  var fontSize = parseInt(getComputedStyle(document.getElementById("divOf50Em"))
                 .getPropertyValue("font-size"));

  var css = `@media screen and (min-width:${fontSize * n}px) { 
               /* 1000px, in theory (50 * 20px) */
               #cell1 {
                 display: none;
               }

               #cell2 {
                 display: table-cell;
               }
             }`;

  var style = document.createElement("style");
  style.textContent = css;
  document.head.appendChild(style);

  window.addEventListener('resize', function() {
    document.getElementById('documentWidth').innerHTML = 'Window width: ' +
      document.documentElement.clientWidth + 'px';
  });
}

plnkr http://plnkr.co/edit/lncvWwBWc18C76UYhPnf?p=preview