Chrome 在放大时不保持一致的 rem 单位

Question

我想在 CSS 中使用 rem 单位，所以我为我的 <html> 标签设置了字体大小，这样我就可以使用 rem 设置子元素] 方面。然而，问题是当您放大 Chrome 时，font-size 样式似乎相对于缩放级别发生变化，这导致具有 rem 单位的元素的尺寸相对于级别发生变化变焦。请参阅下面 Chrome 中的示例：

window.onresize = function() {
  console.log(getComputedStyle(document.body.parentElement, null).getPropertyValue("font-size"));
}

html {
    font-size: 7px;
}
body {
    font-size: 2em;
}
.box {
    width: 10rem;
    height: 10rem;
    background: red;
}

<html>
    <head>
    </head>
    <body>
        <div class="box"></div>
        <p>foo bar baz</p>
    </body>
</html>

要查看效果，请按运行片段，然后单击以查看全屏，并缩小 Chrome。当缩小超过 75% 时，您会看到屏幕上的框不会改变大小，而整个页面应该会改变缩放级别。

此外，正如您在控制台中看到的，当缩放级别为 25% 时，<html> 的计算样式为 font-size: 12px，即与指定的 css 样式直接矛盾。

这在 Firefox 中不会发生，所以我想知道：如何在缩放时使用 rem 单位同时在浏览器中保持一致的行为？

Answer 1

我找到的解决方案是简单地将原始 font-size 乘以 2，然后将所有 rem 大小也除以 2，因为 font-size 在 50% 将再次 7px。在其他情况下，这可能行不通，但再次重复此技巧可能会解决问题

问题似乎是Chrome决定其呈现的字体大小不能小于3px，这意味着任何小于12px的字体大小都会逐渐向以 3px 呈现，但绝不会缩小到小于 3px。

window.onresize = function() {
  console.log(getComputedStyle(document.body.parentElement, null).getPropertyValue("font-size"));
}

html {
    font-size: 14px;
}
body {
    font-size: 1em;
}
.box {
    width: 5rem;
    height: 5rem;
    background: red;
}

<html>
    <head>
    </head>
    <body>
        <div class="box"></div>
        <p>foo bar baz</p>
    </body>
</html>

当然，我仍然很想知道这背后的真正原因是什么，以及是否有更好的解决方案。

Answer 2

我相信这与 Chrome 中 自定义字体 下的 最小字体大小 设置有关。

默认的最小字体大小为 6px。所以 90% of 7 是 6.3，而 80%[=33= 7 的 ] 是 5.6，这是控制台记录值开始更改的点。如果您将 HTML 中的根字体大小更改为 16px，您将不会再次看到同样的现象，直到您达到 33% 缩放，因为 33% of 16 是 5.28，低于最小字体大小。尝试将最小字体大小更改为大于 6px 的值（例如，12px），当您开始缩小时，您会发现这种现象甚至更早出现，而且似乎总是在理论上字体大小会小于浏览器设置的最小字体大小的点。但是，将最小字体大小减小到 6 以下似乎对任何事情都没有影响。

我不确定为什么会这样，但这很有趣。

Chrome 在放大时不保持一致的 rem 单位

Chrome does not keep consistent rem units on zoom-in

html

css

zooming