html - 当用户设置浏览器字体大小时会发生什么？

Question

许多网站编写的代码破坏了用户设置自己的字体大小的能力(在浏览器/移动设备的设置中)。为了避免这种情况，当用户更改默认字体大小时，在技术层面上究竟发生了什么？它有什么影响？

• 在 CSS 中指定的 html 根元素 font-size？它会缩放还是覆盖它？
• 单位 em、px、rem、%?
• 对于那些试图做流体排版？
• 这将如何影响 calc()？
• 移动设备的行为是否相同？

尚未形成完整答案的注释:

但是，以下均不涉及规范，而只是特定行为的集合。

• 根据我自己的实验，为 html 设置带有 % 的 font-size 会在用户更改浏览器字体大小时缩放。
• This answer有资料，好像是说设置html时，px不调整，但是em，rem，% 做。
• This site有一些非常好的信息，但都是十年前的事了，不确定所提到的行为是否只是因为浏览器错误，或者它是否以这种方式设计。
• 人们在谈论这个问题时会使用很多草率的语言。例如，人们会谈论“基本字体大小”，但不会具体说明这是在 root/html 元素、浏览器设置还是两者的组合中指定的字体。我相信那些已经了解这些相互作用的人已经很清楚了，但对我来说，我仍然有一些概念不清楚。

Answer 1

用户定义的字体大小决定了根元素 html 的基本字体大小。 CSS指定的font-size的初始值为medium，在所有桌面浏览器中都对应这个用户定义的大小(Microsoft Edge除外，它遵循Windows DPI和可访问性设置而不是拥有自己的设置)。不幸的是，移动浏览器似乎不支持移动设备典型的系统范围偏好。至少，iOS 上的 Safari、Windows Phone 8.1 上的 Internet Explorer 或 Windows 10 Mobile 上的 Microsoft Edge 都没有。

font-size 属性的所有其他关键字值已定义 here缩放到这个大小，所以如果用户定义的大小是 20px，medium 对应于 20px 而 small 几乎肯定对应于小于 20px 的大小。

媒体查询 rems 和 ems 是直接根据这个用户定义的大小计算的，与根元素的指定 font-size 属性无关。以下每个媒体表达:

(max-width: 30rem)
(max-width: 30em)

当用户自定义尺寸为16px时相当于(max-width: 480px)，当用户自定义尺寸时(max-width: 600px)是 20px。

另一方面，样式规则 rems 是根据根元素的指定 font-size 计算得出的。以下规则:

:root { font-size: 50%; }

当用户定义的尺寸为 16px 时，样式规则中的 1rem 等于 8px，当用户定义的尺寸为 20px 时，1rem 等于 10px。

样式规则 em 和百分比始终是相对于祖先元素计算的，因此它们的行为不会改变。例如，如果 body 的字体大小以 em 或百分比声明，那么它将基于 html(其父级)的字体大小。对于未指定其他尺寸的所有后代，依此类推。

px 单位对应于一个 CSS 像素，因此它的指标永远不会受到用户定义的字体大小的影响。

视口(viewport)单位和 calc() 的行为不会改变，因为这些都不依赖于元素的字体大小。顾名思义，视口(viewport)单位根据视口(viewport)的大小缩放。

对于以 rems 和 em 为单位调整所有内容(包括盒子的宽度和高度)的布局，这可能产生的最显着的整体效果是，用户可以通过更改他们的布局来缩放整个布局首选字体大小。我不知道这有什么用了，尤其是当需要缩放时。

因此，为确保您的副本能够适应用户的首选字体大小而不强制他们缩放，请尽可能以 rems 或 ems 指定所有字体大小。尤其不要在 html 上指定像素字体大小，因为那样会完全覆盖首选项。您不必以 rems 或 ems 为单位指定宽度和高度——这实际上取决于您的布局。并非所有的流体布局都能很好地适应不同的尺寸。实际上，最重要的方面是文本的大小，因为此功能旨在缩放文本以提高可读性。