Question

我已经阅读了很多关于这个主题的文章（并搜索了Q＆amp; A），我发现了，但我仍然不明白em单位和百分比之间的区别是什么。帮助

P.S。我见过这个代码示例：

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

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

Answer 1

好的，所以我决定总结答案。

line-height的百分比值相对于当前的font-size。
em单位始终相对于font-size。
百分比取决于背景。例如，如果它们以font-size使用，它们将相对于当前的font-size;如果它在高度，它们将相对于高度。
当父标记的字体大小声明为“小”，“中”或“大”时，它会稍微改变，因为这些值受浏览器设置的影响。在这种情况下，1em = \ = 100％，1em似乎使设置更“小”或更“大”而不是100％，阅读它here.

谢谢你们，伙计们。：）

Answer 2

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

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

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

Answer 3

1em = 100％，2em = 200％，1,4 em = 140％，依此类推。但是，它实际上依赖于上下文。我认为ems更“移动友好”，但这取决于开发者。

在css中，您使用百分比值，因为用户可以使用不同的屏幕分辨率。例如，当您不希望在js生成的内容中使用空格时。

1em表示“实际字体大小”，2 - “2倍字体大小”，表示ems适应用户设置。

当父标记的字体大小声明为“小”，“中”或“大”时，它会稍微改变，因为这些值受浏览器设置的影响。在这种情况下1em = \ = 100％，1em似乎使设置更“小”或更“大”而不是100％，在这里阅读：

可能存在性能差异，但这取决于浏览器。