基于 Rem 的布局，在 chrome 上缩放不一致，PX vs REM

Posted 2023-02-21

【中文标题】基于 Rem 的布局，在 chrome 上缩放不一致，PX vs REM

【英文标题】：Rem-Based Layouts, Zooming on chrome is inconsistent, PX vs REM

【发布时间】：2017-11-06 19:13:14

【问题描述】：

我一直在为这个问题绞尽脑汁，谷歌搜索并没有太多的帮助，甚至没有关于这个问题的文档，但它极大地影响了我目前向移动友好型设计的转变。

无论我走到哪里，每个人都在吹捧使用基于rem 的布局作为新的黄金标准，从表面上看，这种方法的优点似乎很理想（对基于参考像素的缩放和字体大小缩放的完全可访问性支持以支持许多 DPI 和许多屏幕尺寸/设置）。

但是我遇到了一个相当大的障碍，我发现 Chrome（可能还有所有的 webkit 浏览器，但我没有要测试的 mac atm）似乎不像其余的。

初始设置如下：

html  font-size: 62.5%; 
body  font-size: 1.6rem; 

我们应该能够使用 1/10 像素大小（以 rems 为单位）设置所有测量值：

.my-element  height: 15rem;  /* 150px */

我在这里创建了一个简单的示例来说明我的问题：https://jsfiddle.net/gLkpz88q/2/embedded/result/

当您使用 Chrome 并以这种方式向外扩展时，请注意布局如何停止缩放但内容仍在继续。

将此与 Firefox、IE11、Edge 进行比较，您根本看不到这种行为，它们都均匀且持续地扩展。

这是（左上：Chrome，右上：IE11，左下：Edge，右下：FireFox）并排：

如您所见，如果 rem 单元的缩放比例与其他所有单元不同，这会对布局产生一些可怕的影响。

我不确定如何处理这种情况，因为 WebKit/Chrome 似乎决定以完全不同的方式处理缩放，这引发了对未来所有缩放场景的质疑。

有许多文章提倡只使用像素，因为 CSS 参考像素 可以很好地处理移动缩放：

Just Use Pixels R.I.P. Rem, Viva CSS Reference Pixel!

然而，这些人倾向于忽略字体缩放问题，认为这是不太可能发生的情况。

我快速浏览了一些大型移动友好/友好的大型网站，我可以从大型成功的公司中想到，似乎他们中的大多数只是使用像素来满足他们所有的布局需求。 （谷歌、Facebook、Wordpress、Twitter、Bootstrap 3、[在某种程度上还有 Bootstrap 4]、MDN 和 WebPlatform）

Chrome 是新的破坏标准的 IE 吗？还是我做错了什么？我很想在这一点上只使用像素来保持一致性。

【问题讨论】：

感谢您发布一个 300 赏金问题 - 我从未像现在这样更有动力去研究一些东西 ;)

【参考方案1】：

我将首先解决你的结束语来开始我的回答，纯粹是因为它引起了我的注意（除了巨大的赏金）。

“Chrome 是新的破坏标准的 IE 吗？还是我做错了什么？我很想在这一点上使用像素来保持一致性。”

是和不是。与其他主流浏览器引擎相比，我在 WebKit 浏览器中无法运行的问题更多，但在调查了个别问题后，我通常发现这是因为 WebKit 往往比其他人更严格地遵守 W3C 提供的规则。

大多数其他浏览器引擎似乎对开发人员非常宽容，我喜欢他们，但我们不一定会因为遵守规则而将 WebKit 钉在十字架上。

为了将上述陈述扩展到您的问题的其余部分，我浏览了W3C document regarding relative font lengths。在 rem 单位 标题下，您会注意到第一行说明：

等于根元素上“font-size”的计算值。

不幸的是，font-size 本身对您的浏览器引擎的解释相对开放。

Cyrix 的回答是正确的，因为 Chrome 会根据它内置在引擎中的最小字体大小来调整您的字体大小。为了轻松解决您的问题，您可以在容器元素上使用 text-size-adjust 或更新的 font-size-adjust 规则来防止这种情况发生：

*  /* Replacing "*" with ".my-element" would probably be better for the rest of your site*/
    -webkit-text-size-adjust: none;
    -webkit-font-size-adjust: none;

但问题是旧版本的 Chrome 不接受 font-size-adjust，而新版本只接受 font-size-adjust并且仅在启用实验性功能时。

最后，为了回答您的其余问题，rem 和 em 如果您正在处理实际文本内容等，是一个很好的度量单位。请考虑以下几行：

如果您希望<h1> 始终比正文 h1 font-size: 1.25rem; 大 25% 左右 如果标题栏的高度必须始终是其中文本行高度的 3 倍 .header height: 3em;

但是，如果您使用的容器类型块需要在内部适应指定的内容块，那么使用更稳定的东西总是更好。请记住，稳定性并不意味着反应迟钝。

以此为例：

.my-element 
  width: 95%;
  margin: auto;
  max-width: 600px;

这将使您的元素很好地浮动在页面中间，同时保持元素的大小适合其中的内容，如果屏幕尺寸减小到小于您的.my-element 高度，它将调整相应地。

简而言之。

是的，Chrome 的破坏程度让 IE 嫉妒，但没关系。 是的，很多人确实尝试使用相对字体单位作为最好的做法，但与他们所说的相反，您不需要在所有事情上都使用它。 您的最终结果应该是响应式网页。您实现这一目标的方法会因您拥有的内容而异。 字体缩放是一个很可能会存在一段时间的影响因素，如果您担心它会如何影响您的网页，请确保只有

需要

的元素相对于您的字体缩放，将随着您的字体缩放。 “我很想在这一点上只使用像素来保持一致性。” 这是大多数情况下合乎逻辑的结论，所以去吧:)

【讨论】：

我试图回答您的所有问题，并解决您所有的问题，但如果我遗漏了什么，请随时告诉我。

非常感谢您抽出时间用研究和细节回答这个问题。我真的很难弄清楚谁应该在这里给这个赏金，因为 cryix 的回答对于正在发生的事情非常准确，但工作量要低得多，而且不完全具有权威性。最终，他的回答让我获得了权威信息，以及我所寻求的更深入的理解。

感谢您的积极性，并指出 font-size-adjust 但这并不是解决此问题的真正稳定方法，因为它是一个草案、供应商特定的、不稳定的功能，实际上并不是为解决此问题而设计的（即使它是偶然发生的）。我希望这不会阻止您回答问题或寻求赏金，我非常感谢您的努力。

@Aren Ah 老实说，我并没有真正期待赏金，纯粹是因为 Citrix 已经有了正确的答案，但我确实喜欢这项研究，所以我想在这里发布更多信息（必须争取投票；））感谢您回复评论，非常感谢！

【参考方案2】：

这是因为 Chrome 的设置最小字体大小的行为，所以如果你缩小，chrome 会将最小字体大小设置为 6px（中日文版本为 12px）。因此，您的 div 将具有最小宽度，因为它取决于您的基本字体大小（不能小于 chrome 的最小值）。

另见：

Chrome will increase the font size when zooming out

[编辑]附加信息：

关于此主题的 Chromium 门票和讨论：

https://bugs.chromium.org/p/chromium/issues/detail?id=16875 https://bugs.chromium.org/p/chromium/issues/detail?id=36429

-webkit-text-size-adjust Support Dropped，因此解决此行为的可行解决方案不再可靠：

https://trac.webkit.org/changeset/145168/webkit

【讨论】：

这真的很有趣，也很有意义。我希望这些信息更容易找到，我不知道 chrome 在默认字体大小上限制了最小大小。我理解其中的原因，但它确实会产生一些尴尬的结果。

【参考方案3】：

不要使用这个 CSS font-size: 62.5%; body font-size: 1.6rem; 它会导致更多值得的问题，因为你会在使用不同基本字体大小的浏览器上得到不同的结果。只需使用此站点来计算正确的 rem 值。 http://pxtoem.com/

这应该会给你一致的结果。 https://jsfiddle.net/WizardCoder/gLkpz88q/3/

更新 https://jsfiddle.net/WizardCoder/gLkpz88q/5/

【讨论】：

我知道对 62.5% 技巧的厌恶，但不这样做仍然会成为不同浏览器上不同默认字体大小的牺牲品，标准只会“更大”。您提供的小提琴仍然在 33% 和 25% 缩放级别之间显示相同的基本行为，较大的基本尺寸使问题更加微妙，但并不能完全阻止它.您会注意到，总体布局在 33 到 25 之间或多或少保持不变，但图像按比例缩小意味着它与周围基于 rem 的内容之间的关系不会保持一致。

其实也有同样的问题。正如 cyrix 在他的回答中所说，这正是 chrome 所做的。为什么你还想缩小那么远？

与其说是想缩小那么远，不如说是想知道为什么会发生这种情况，以及以后会不会在别处灼伤我。对这种异常行为进行有计算的风险评估对于证明管理方法的合理性对于项目的寿命很重要。

就我个人而言，这对我的任何项目都不是问题。主要是因为我的构建完全响应基于 REM 的媒体查询，所以网站将适应浏览器之间字体大小的任何差异。不过可能有人不同意，这只是我的经验。