em 单位和百分比有什么区别？

Question

我读了很多关于这个主题的文章（并搜索了问答），我发现了，但我仍然不明白em单位和百分比之间的区别是什么。帮忙吗？

附注 我看过这个代码示例：

p { font-size: 10px; }
p { line-height: 120%; }  /* 120% of 'font-size' */

这是什么意思？究竟为什么有人想要将行高设置为字体大小的百分比值？

Answer 1

百分比值与某些数量相关，具体取决于上下文，有时与元素或其父元素的另一个属性的值相关。

在元素的上下文中，

em

值相对于元素的计算字体大小，除了在

font-size

中，它们相对于父元素的计算字体大小。在元素的根部或外部，它们与初始字体大小相关，通常为

16px

，并且可以在浏览器设置中进行调整以实现可访问性。

具体来说，在这些情况下，它们之间没有区别（

1em

等于

100%

）：

• 在

  line-height

  中，两个单位都相对于元素的计算字体大小。

• 在

  font-size

  中，两个单位都相对于父计算的字体大小，并且在根处相对于初始值。

注意： 通常首选在

line-height

中使用无单位数字。由于子元素继承的值不会以百分比或

em

形式保存，而是绝对计算值，因此如果后者继承的话，子元素中继承的

line-height

值将不会相对于它们自己的字体大小进行调整已更改。

已过时（已编辑）：答案最初包含一个警告，但在现代浏览器中不再适用。在某些古老的浏览器中，将第一个祖先元素的

font-size

来定义它（通常是

body

或

html

）设置为

em

值可能会产生夸大的字体大小。您可以阅读相关内容此处、此处和此处。

Answer 2

1em = 100%，2em = 200%，1,4em = 140% 等等。然而，它实际上取决于上下文。

1em

表示“等于实际字体大小”，2 - “2 倍字体大小”。 EM 适应用户设置。

当父标签的字体大小声明为“小”、“中”或“大”时，它会发生一点变化，因为这些值会受到浏览器设置的影响。当用户将客户端字体大小更改为“小”或“大”时，

1em

似乎使字体比

100%

更小或更大。

进一步阅读： https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent

Answer 3

行高通常是字体大小的倍数。事实上，它是唯一不需要指定单位的值：

p { line-height: 1.2; } /* = 1.2em = 1.2*font-size = 120% of font-size */

如果行高与字体大小成比例，则更容易调整字体大小，而不必担心固定行高。