我已经阅读了很多关于这个主题的文章（并搜索了问答），但我仍然不明白em单位和百分比之间的区别。能帮忙解释一下吗？
P.S. 我看到了这个代码示例：
p { font-size: 10px; }
p { line-height: 120%; } /* 120% of 'font-size' */
这是什么意思？为什么有人要将行高设置为字体大小的百分比值呢？
在IT技术中，行高和字体大小之间的百分比关系是一种常见的排版方式。通过调整行高和字体大小之间的比例，可以使文本更易于阅读和理解。3个回答
7
好的，我决定总结这些答案。
- 行高的百分比值是相对于当前字体大小而言的。
- em单位始终相对于字体大小。
- 百分比因上下文而异。例如，如果它们用于字体大小，则将相对于当前字体大小；如果用于高度，则将相对于高度。
- 当父标签的字体大小声明为"small"、"medium"或"large"时，一些情况会有所变化，因为这些值受浏览器设置的影响。在这种情况下，1em == 100%，1em似乎比100%设置更加“小”或更加“大”，在这里了解更多信息。
- orelby
4
1em = 100%, 2em = 200%, 1.4em = 140%等。但实际上，它是上下文相关的。
1em表示“与实际字体大小相等”，2表示“字体大小的两倍”。EM会根据用户设置进行调整。
当父标签声明了字体大小为“small”、“medium”或“large”时，情况会稍有变化，因为这些值受浏览器设置的影响。当用户将客户端字体大小更改为“小”或“大”时，1em似乎会使字体比100%略微小或大。
进一步阅读： https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent
- Błażej Michalik
7
这正是我一直在寻找的答案。你告诉我ems和百分比实际上是相同的，除了移动设备支持。我理解得对吗？
我不太明白你在第二个注释中所说的话。如果它们是相同的，但ems得到更好的支持，为什么我们不只使用ems并放弃百分比呢？ - orelby
在使用中有一些细微的差别。据我所知，你可以使用EM作为字体大小单位。在我的经验中，相比于百分比，在移动手机上使用EM更加合适。对我来说，这样做会减少很多麻烦。我忘了一件事。是的，1em = 100%，但当父标签声明了“small”、“medium”或“large”字体大小时，它会稍微改变 - 请阅读我的编辑。 - Błażej Michalik
我已经阅读了这篇文章，现在对它有了更多的理解。但是...我仍然不明白为什么会出现浏览器设置问题；我以为它们应该是一样的... - orelby
浏览器设置由用户决定，所以实际上这不是问题 :).
百分比和ems都是相对的。区别在于它们相对于什么。 - Błażej Michalik
这是什么？这里的主要问题是什么不同。XD - orelby
显示剩余2条评论
2
行高通常是字体大小的倍数。实际上，它是唯一一个不需要指定单位的值：
p { line-height: 1.2; } /* = 1.2em = 1.2*font-size = 120% of font-size */
如果行高与字体大小成比例，那么调整字体大小时就不必担心固定的行高问题，这样更方便。
- Harmen
3
3值得更明确地指出，在这种情况下（
line-height），百分比和em单位通常是相同的。 1em = 1行高。 - jonvuri你说的“一般”是什么意思？ :) - orelby
1
em 始终相对于当前元素的字体大小（除非在字体大小本身使用该单位时，那么它相对于父元素的字体大小）。％ 相对于特定属性的父级值（width: x％; 表示：取父级宽度的 x 百分比）。 - Harmen网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
em单位。 - Jukka K. Korpela