用户设置浏览器字体大小会怎样？

Question

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

• CSS中指定的html根元素font-size？它会缩放还是覆盖它？
• 单位em，px，rem，％？
• 对于尝试进行流畅排版的人来说，其他单位（例如vh，vw，vmin，vmax）又如何呢？
• 这将如何影响calc()？
• 移动设备的行为是否相同？

尚未形成完整答案的笔记：

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

• 根据我自己的实验，当用户更改浏览器字体大小时，将font-size的{​​{1}}设置为％会缩放。
• This answer有一些信息，似乎是说当设置html时，html不会调整，但是px，em，％会调整。
• This site有一些非常好的信息，但是已经存在了十年之久，并且不确定所提到的行为是仅仅由于浏览器的错误还是设计得如此。
• 人们在谈论这一点时会使用很多草率的语言。例如，人们将谈论“基本字体大小”，但没有指定这是在root / {rem元素，浏览器设置还是两者的组合中指定的字体。我相信对于已经知道交互作用的人来说很清楚，但是对我来说，我仍然不清楚这些概念。

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，而{{1} }几乎可以肯定小于20px。

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

font-size

等效于(max-width: 30rem) (max-width: 30em) （当用户定义的大小为16px时），(max-width: 480px)等效于用户定义的大小为20px。

另一方面，

样式规则rems是根据根元素的指定(max-width: 600px)计算出来的。以下规则：

font-size

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

样式规则em和百分比始终相对于祖先元素进行计算，因此它们的行为不会改变。例如，如果:root { font-size: 50%; } 的字体大小以em或百分比表示，则它将基于body（其父级）的字体大小。对于所有未指定其他大小的后代，依此类推。

html单元对应一个CSS像素，因此其度量标准永远不会受到用户定义的字体大小的影响。

视口单位和px的行为不会改变，因为所有这些都不取决于元素的字体大小。顾名思义，视口单位可以缩放到视口的大小。

这对于以rems和ems为单位的一切（包括框的宽度和高度）大小的布局可能产生的最显着的总体效果是，用户只需更改其布局即可缩放整个布局首选字体大小。我不知道这有多大用处，尤其是当缩放成为问题时。

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