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

Question

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

• CSS 中指定的html 根元素font-size？它会扩展还是覆盖它？
• 单位em、px、rem、%?
• 对于那些尝试进行流畅排版的人来说，其他单位呢，例如 vh、vw、vmin、vmax？
• 这将如何影响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 都没有。

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

媒体查询 rems 和 ems 直接根据此用户定义的大小计算，而与根元素的指定 font-size 属性无关。以下每种媒体表达方式：

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

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

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

:root { font-size: 50%; }

样式规则中的1rem在自定义大小为16px时相当于8px，在自定义大小为20px时相当于10px。

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

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

视口单元和calc() 的行为不会改变，因为这些都不取决于元素的字体大小。正如他们的名字所暗示的，视口单位缩放到视口的大小。

这对以 rem 和 em 为单位的 所有内容（包括框的宽度和高度）的布局产生的最显着的整体效果是，用户可以通过更改其布局来缩放整个布局首选字体大小。我不知道这有多大用处，尤其是当缩放是一件事时。

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