rem 单位不影响 Chrome 中的 DIV - 最小字体大小设置的副作用答案

【问题标题】：rem units do not affect DIVs in Chrome - side-effect of minimum font size settingrem 单位不影响 Chrome 中的 DIV - 最小字体大小设置的副作用
【发布时间】：2019-10-17 15:51:20
【问题描述】：

我偶然发现了一个非常奇怪的情况，其中rem 单位没有影响DIVs（可能还有所有其他块元素），但仍然对文本有效（我怀疑所有其他内联元素）。这仅在一台 Windows 计算机上发生，并且仅在 Chrome 74 中发生。在所有其他平台（Linux、Mac OS X）和其他浏览器（甚至是旧版 Safari 和 Canary 中，它在 Chrome 76 中按预期工作）。

我没有机会对其进行广泛测试，但我亲眼目睹了它并且无法检测到问题的根源。我也在隐身模式下尝试过，所以缓存或第三方扩展应该不会影响它。

有没有人遇到过或者有解决办法？我已经在同一台计算机上测试了https://youtube.com/tv（使用rems 构建）并且可以正确扩展。我的网站和 YouTube 之间的唯一区别是我在根元素上设置了 fontSize，以像素而不是百分比为单位。

有什么想法吗？

const updateRatio = () => {
  const ratio = Math.min(window.innerWidth / 640, window.innerHeight / 480);
  document.querySelector(":root").style.fontSize = `${ratio}px`;
};
window.addEventListener("resize", updateRatio);
updateRatio();

#app {
  border: 2px dashed red;
  width: 320rem;
  height: 240rem;
}

&lt;div id="app"&gt;&lt;/div&gt;

代码沙盒：https://codesandbox.io/s/competent-resonance-dn1bn。要查看效果，请使用红色虚线框调整面板的大小。

【问题讨论】：

你会创建一个堆栈片段来演示这个问题吗？
已更新代码沙箱。
不幸的是，这不足以重新打开问题。这里的问题主要需要是自包含的，以便外部链接的破坏或修改不会影响问题的可读性。如果您在之前没有遇到此规则的情况下成功获得了 7K 的声望，那么这令人印象深刻/不幸，这取决于您的观点;-)。
某些示例无法在 Stack Snippet 中运行。因此 - Codesandbox。包括它。
您不需要使用堆栈片段。如果堆栈片段不起作用，请不要使用它。但是，您需要将 MCVE 保留在问题中 - 但不需要直接从问题中运行它

标签： css google-chrome font-size

【解决方案1】：

原来 Chrome 有这个设置 - “最小字体大小”（chrome://settings/fonts?search=minimum）。因此，如果您设法使引用 fontSize 小于此处设置的值，则整个 rem 逻辑将中断。

这是在有问题的 Chrome 中的设置方式。

【讨论】：