rem单位不会影响Chrome中的DIV-最小字体大小设置的副作用 [英] rem units do not affect DIVs in Chrome - side-effect of minimum font size setting

问题描述

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

I've stumbled upon a very bizarre case, where rem units were not affecting DIVs (and potentially all other block elements), but were still effective against text (and I suspect all other inline elements). This was happening on one Windows computer only and only in Chrome 74. On all other platforms (Linux, Mac OS X) and other browses (even legacy Safari and in Canary, which is at Chrome 76 at the moment it worked as expected).

我没有机会对其进行广泛的测试，但是我亲眼目睹了它，因此无法发现问题的根源.我也以隐身模式尝试过它，因此没有缓存或第三方扩展会影响它.

I had no chance to test it extensively, but I've witnessed it myself and wasn't able to detect the source of the problem. I tried it in incognito mode as well, so no cache or third party extensions should have affected it.

有人遇到过或有任何解决方案吗?我已经在 https://youtube.com/tv (由构建)上测试了完全相同的计算机，并且缩放比例正确.我的网站和YouTube之间的唯一区别是，我在根元素上设置了fontSize，而不是像素.

Has anyone encountered it or has any solution? I've tested https://youtube.com/tv (which is built with rems) on the very same computer and it scaled properly. The only difference between my site and YouTubes is that I set the fontSize on the root element in pixels rather than in percents.

有什么想法吗?

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

<div id="app"></div>

Codesandbox: https://codesandbox.io/s/competent-resonance-dn1bn.要查看效果，请用红色虚线框调整面板的大小.

Codesandbox: https://codesandbox.io/s/competent-resonance-dn1bn. To see the effect, resize the panel with the dashed red box.

推荐答案

原来，Chrome具有此设置-最小字体大小"(chrome://settings/fonts?search = minimum).因此，如果您设法使参考fontSize小于此处设置的参考值，则整个rem逻辑将中断.

Turns out Chrome has this setting - "Minimum font size" (chrome://settings/fonts?search=minimum). So if you manage to make the reference fontSize smaller than what is set there, whole rem logic will break.

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

Here's how it was set in the problematic Chrome.

这篇关于rem单位不会影响Chrome中的DIV-最小字体大小设置的副作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！