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

Question

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

• 根html元素font-sizeCSS 中指定的它会扩展或覆盖这个吗？
• 单位em, px,rem , %?
• 其他单位呢，比如vh, vw, vmin,vmax对于那些尝试进行流体排版的人来说
• 这将如何影响calc()？
• 移动设备的行为是否相同？

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

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

• 根据我自己的实验，设置font-size为html当用户更改浏览器字体大小时，使用 % 设置确实会缩放
• 这个答案有一些信息，好像是说什么时候html设置，px不调整，但是em，rem , % 会调整。
• 这个网站有一些非常好的信息，但它已经有十年的历史了，不确定所提到的行为是否只是因为浏览器错误或者它是否是这样设计的。
• 人们在谈论这个问题时使用了很多草率的语言。例如，人们会谈论“基本字体大小”，但不会指定这是否是 root/ 元素html、浏览器设置或两者的组合中指定的字体。我确信对于那些已经了解交互的人来说这是很清楚的，但对我来说我仍然不清楚这些概念。

Answer 1

用户定义的字体大小决定了根元素的基本字体大小html。font-sizeCSS 指定的初始值为medium，在所有桌面浏览器中都对应于该用户定义的大小（Microsoft Edge 除外，它遵循 Windows DPI 和辅助功能设置，而不是拥有自己的设置）。不幸的是，移动浏览器似乎不尊重移动设备典型的系统范围偏好。至少，iOS 上的 Safari、Windows Phone 8.1 上的 Internet Explorer 或 Windows 10 Mobile 上的 Microsoft Edge 都没有这样做。

\n\n

此处font-size定义的属性的所有其他关键字值都会缩放到此大小，因此如果用户定义的大小为 20px，则对应于 20px 和mediumsmall几乎肯定对应于小于 20px 的尺寸。

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

:root { font-size: 50%; }\n

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n