以 em 为单位设置根元素的字体大小是什么意思？

Question

我没能找到

em

单位的官方定义，但我在规范中找到了这个：

我还找到了很多其他资源（如下所列）。这让我开始思考，将根元素（即

<html>

）的字体大小设置为
em
单位是什么意思？虽然我的很多资料都建议使用

em

，但我找不到任何专门调用根元素用法的。

html {
  font-size: 1em;
}

<html>

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

</html>

html {
  font-size: 1.5em;
}

<html>

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

</html>

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; }

是什么意思？

来源

Answer 1

当在它们引用的元素的 font-size 属性值中使用时，局部字体相对长度根据父元素的计算度量值进行解析——或者根据与字体的初始值相对应的计算度量值进行解析和行高属性，如果元素没有父元素.