html 元素上的 font-size: 100% 有啥作用？ [复制]

Posted 2023-03-06

【中文标题】html 元素上的 font-size: 100% 有啥作用？ [复制]

【英文标题】：What does font-size: 100% on the html element do? [duplicate]html 元素上的 font-size: 100% 有什么作用？ [复制]

【发布时间】：2013-10-30 10:58:27

【问题描述】：

我正在启动一个新项目。我问自己：当我使用em 单元时，为什么要在html 元素上添加font-size: 100%？

这个100% 与什么相比 - 100% 是什么？

【问题讨论】：

与继承的字体大小相比，与em相同（对于根元素，这是默认的文本大小）

你见过***.com/questions/6803016/…吗？

【参考方案1】：

html 上 100% 的字体大小等于浏览器默认字体大小，可以是 14px 或 16px。

【参考方案2】：

对于浏览器来说，有多种将字体大小声明为相同值的方法。

font-size: 1em;

font-size: 100%;

font-size: 16px; // this is default

这样，您可以获得默认的字体大小。但请注意，16 px 会改变字体大小，但 em 和 % 将取决于 body 标签中使用的字体大小。

小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/5Wkus/

所以你会看到，em 完全取决于body 中声明的字体。或者你可以说，它从孩子到父母。它一直在寻找最近的父级的字体大小变化。在大多数情况下，它会将代码定向到 body 元素或用户代理默认样式表。

【讨论】：

最后一段不正确。您看到的是body 的字体大小不受影响，因为您实际上并没有更改html 的字体大小。它不会导致html 采用body 的字体大小。