设置根字体大小不影响 Safari 中用于边距、填充等的 rem 单位答案

【问题标题】：Setting root font-size not affecting rem units in Safari for margin, padding, etc设置根字体大小不影响 Safari 中用于边距、填充等的 rem 单位
【发布时间】：2021-08-15 10:23:49
【问题描述】：

我有一个 Web 应用程序，它在 Chrome 和 Firefox 中完美呈现，但在 Safari 中看起来完全无法理解。我相信这是由于 Safari 如何处理 rem 单位的填充、大小等。

我将 CSS 中 html 和 root 中的字体大小设置为 6.25%，在默认字体大小为 16px 的情况下，将 rem 缩放器转换为 1px（即10rem 变为10px)。然后我用rem 单位指定所有尺寸。我这样做是因为网上的一些资源表明这是一个很好的策略，并且到目前为止它对我很有帮助。

但是，在 Safari（14.1.2，几乎可以肯定之前，我从未在 Safari 上测试过）中，它似乎只缩放字体大小。所有的内边距、边距等实际上都比应有的大 9 倍。例如，我将边距指定为14rem 16rem 14rem 16rem，Safari 会将其呈现为126px 144px 126px 144px，这会大量放大所有内容并使页面无法查看。但是，字体大小是准确的。

在我的html CSS 类中设置margin: 1px 1px 1px 1px 等似乎不起作用。

如何最好地解决这个问题？

【问题讨论】：

标签： css safari

【解决方案1】：

这可能是 Safari 设置最小字体大小的问题。 Safari 不允许字体“太小”，所以我猜您的缩放在 Safari 中无法按预期工作。

这里讨论过： Media Queries issue: Safari not scaling elements in REM

【讨论】：

你是对的...如果我将基础 font-size 设置为 10px 然后在 x0.1 使用 rem 我现在拥有的一切都可以... 为什么，Apple... 为什么..？ 这也解释了为什么是x9；也许9px 是他们满意的最小的font-size。在将您的答案标记为正确之前，我会再玩一些以确保它涵盖了它。
我不明白的一件事是为什么它保留了我的字体大小，但没有保留应有的边距和边框大小（等）。如果是这样的话，你会认为要么全有，要么全无。
好吧，我认为它没有，而是将字体大小“向后”缩放：D
也许……无论如何，现在确实一切正常，谢谢您的回答！
很高兴我能帮上忙 :)