使网页字体根据 iOS 中的动态类型自动调整大小

Question

我希望我的网站适应 iOS 的动态字体大小。因此，如果您在设置中更改字体大小（设置 > 通用 > 辅助功能 > iPhone 上的较大文本），您的网页字体大小应该会根据此进行调整。

我在 html 根目录中添加了 font: -apple-system-body。在整个网站中，我使用rem 来调整相对于 html 根目录的字体大小。 所以它正在工作，但问题是-apple-system-body 默认提供font-size: 16px，这对我的页面来说太高了。我想将其转换为 10px; 所以我的 html 根字体大小应该是系统始终提供的 62.5%。

目前我正在使用 javascript 来实现这一点：

document.documentElement.style.fontSize = document.documentElement.style.fontSize * 0.625;

想知道是否只有 css 可以解决这个问题。

Answer 1

您可以使用 css calc() 函数。在此函数中，您可以执行操作。例如：

font-size: calc(1rem * 0.625);

欲了解更多信息：https://css-tricks.com/a-complete-guide-to-calc-in-css/

Answer 2

是的，将 HTML 大小设置为 62.5%。这将尊重系统设置（10px 是古代浏览器的后备，并不是真正需要的）

html{
    font-size: 10px;
    font-size: 62.5%;
}

如果你这样做，请确保你在任何地方都有 rem 或 em 单位。