gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:10:58 25 4
gpt4 key购买 nike

我想利用 rem CSS 中的单位,所以我将字体大小设置为 <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% 时,您会看到屏幕上的框不会改变大小,而整个页面应该会改变缩放级别。

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

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

最佳答案

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

默认的最小字体大小是 6px。因此,790%6.3,而 780% 是 < strong>5.6,这是控制台记录值开始变化的点。如果将 HTML 中的根字体大小更改为 16px,在缩放到 33% 之前,您不会再看到同样的现象,因为 33% 165.28,低于最小字体大小。尝试将最小字体大小更改为大于 6px 的值(比如 12px),当您开始缩小时,您会发现这种现象发生得更早,并且它似乎总是处于理论上字体大小会小于浏览器设置为最小字体大小的位置。但是,将最小字体大小减小到 6 以下似乎对任何事情都没有影响。

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

关于html - Chrome 不会在放大时保持一致的 rem 单位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59329357/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com