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

Question

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

htmlcssbrowser

4

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

指定在CSS中的html根元素font-size？它会缩放或覆盖吗？
单位是em、px、rem、%？
那其他单位，如vh、vw、vmin、vmax，对于那些试图进行流体排版的人呢？
这将如何影响calc()？
移动设备的行为是否相同？

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

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

通过自己的实验，使用百分比设置html的font-size会随着用户更改浏览器字体大小而进行缩放。
这个答案有一些信息，似乎表明当设置html时，px不会调整，但em、rem、%会。
这个网站有一些非常好的信息，但它已经过去十年了，不确定提到的行为是否只是由于浏览器错误而存在，还是设计成那样的。
人们在谈论这个问题时使用了很多不规范的语言。例如，人们会谈论“基本字体大小”，但没有指定这是根/ html 元素中指定的字体，浏览器设置还是两者的组合。我相信对于那些已经知道交互方式的人来说，这是清楚的，但对于我来说，这些概念仍然不清楚。

- eedrah

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

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

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

媒体查询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%; }

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

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

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

视口单位和calc()的行为不会改变，因为它们中没有任何一个依赖于元素的字体大小。正如它们的名称所示，视口单位缩放到视口的大小。

这可能对整个布局（包括框的宽度和高度）都使用rems和ems进行尺寸调整的布局产生最明显的整体效果，即用户可以通过更改其首选字体大小来缩放整个布局。我不知道这还有多有用，特别是在缩放功能已经存在的情况下。

因此，为了确保您的文本能够适应用户首选的字体大小而不强制他们进行缩放，请尽可能使用rem或em指定所有字体大小。特别是不要在html上指定像素字体大小，因为这会完全覆盖用户的偏好设置。您不一定需要使用rem或em指定宽度和高度 - 这实际上取决于您的布局。并非所有流体布局都能很好地与不同的大小相匹配。真正重要的方面是文本的大小，因为该功能旨在调整文本大小以提高可读性。