为根元素<html>设置em单位的font-size具体含义是什么？

我没能找到em单位的官方定义，但在CSS规范里找到了相关内容：

同时我也整理了不少相关资料，这让我产生了一个疑问：为根元素（即<html>）设置em单位的font-size到底是什么含义？

虽然很多资料都推荐使用em单位，但没有资料专门提到根元素使用em设置字体大小的场景。

示例1：设置为1em #

html { font-size: 1em; }

<html><body><h1>html { font-size: 1em; }</h1><p>Hello World!</p></body></html>

示例2：设置为1.5em #

html { font-size: 1.5em; }

<html><body><h1>html { font-size: 1.5em; }</h1><p>Hello World!</p></body></html>

示例3：设置为0.5em #

html { font-size: 0.5em; }

<html><body><h1>html { font-size: 0.5em; }</h1><p>Hello World!</p></body></html>

通过这三个示例，我能直观看到页面字体大小的变化，但我想弄明白这种效果背后的逻辑——换句话说，html { font-size: <x>em; }到底代表什么含义？

参考资料 #

• 移动端网站字体大小相关讨论
• CSS Values and Units Level 4规范中em单位的内容
• W3C官方样式示例中的字体单位说明
• MDN关于font-size属性的文档

内容的提问来源于stack exchange，提问作者Daniel Kaplan