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

Question

我在一个项目上工作了一段时间，我认为 em 在表示长度时是 de facto 单位。

我通常的做法是将 body 和 html 元素设置为所需的 px 大小，并将所有其他元素设置为 1em。之后，其余的都在 em 中。直到今天早上，这似乎是一个不错的计划，直到我发现 媒体查询 似乎没有考虑到基础 body 和 html 像素值。实际上，它们似乎采用了浏览器的默认字体大小，这似乎是一种非常奇怪的行为。我还找到了this article，这似乎证实了这一点。

我做了一个小的 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 min-width媒体尺寸.应显示值“2”。我还放置了一个 div，其大小为 50em 以显示何时应该触发该行为，并确认 CSS 在媒体查询之外工作。

如果您调整此实验的输出大小，您会认为两个值之间的偏移会发生在 1000px 值处，即 50em * 20px ，但事实并非如此，它发生在 800px 即 50em * 16px （默认浏览器字体大小 - 如果这样当然是你的默认尺寸）。

我显然不确定为什么会发生这种情况，但我有两个问题：

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

否则，当使用媒体宽度和 ems 时，似乎不可能有一个与媒体查询对齐的脚本，因为我们不能相信浏览器的字体大小将始终为 16 像素。

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

Answer 1

经过更多研究，

1. 似乎无法在 CSS 或 JavaScript 中覆盖 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';
  });
}

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