设置根字体大小不影响 Safari 中的 rem 单位的边距、填充等
Setting root font-size not affecting rem units in Safari for margin, padding, etc
我有一个 Web 应用程序可以在 Chrome 和 Firefox 中完美呈现，但在 Safari 中看起来完全无法理解。我相信这是由于 Safari 如何处理 rem 单位的填充、magin 等。
我将 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 class 中设置 margin: 1px 1px 1px 1px 等等似乎没有用。
如何最好地解决这个问题？
这可能是 Safari 设置最小字体大小的一些问题。 Safari 不允许字体“太小”，所以我猜你的缩放在 Safari 中没有按预期工作。
这是在这里讨论的：
Media Queries issue: Safari not scaling elements in REM
我有一个 Web 应用程序可以在 Chrome 和 Firefox 中完美呈现，但在 Safari 中看起来完全无法理解。我相信这是由于 Safari 如何处理 rem 单位的填充、magin 等。
我将 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 class 中设置 margin: 1px 1px 1px 1px 等等似乎没有用。
如何最好地解决这个问题？
这可能是 Safari 设置最小字体大小的一些问题。 Safari 不允许字体“太小”，所以我猜你的缩放在 Safari 中没有按预期工作。
这是在这里讨论的： Media Queries issue: Safari not scaling elements in REM