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

【问题标题】：What's the difference between em units and percents?em单位和百分比有什么区别？
【发布时间】：2013-03-09 13:40:52
【问题描述】：

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

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

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

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

【问题讨论】：

为什么有人想将行高设置为其他而不是百分比值？这样行高总是与字体高度成比例。
嗯。也许我应该三思而后行。其他属性呢？那样不行，对吧？
他们是两个不同的单位；他们有不同的定义。因此，这个问题毫无意义。您可能想问一些不同的问题，但您的代码示例甚至根本不包含 em 单元。
在stackoverflow.com/questions/15311338/…查看我的评论。
行高的固定单位确实有一些应用，主要是在不处理文本时，如图标，或者当您希望文本周围的区域匹配其他内容时。但我同意，在大多数情况下，您应该使用相对测量。实际上，最好的方法是不使用任何单位（基本上就像百分比一样）

【解决方案1】：

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

line-height 的百分比值是相对于当前 font-size 的。
em 单位始终与字体大小相关。
百分比取决于上下文。例如，如果它们用于字体大小，它们将相对于当前字体大小；如果是高度，它们将是相对于高度的。
当父标签的字体大小声明为“小”、“中”或“大”时，它会发生一点变化，因为这些值受浏览器设置的影响。在这种情况下 1em =\= 100%，1em 似乎使设置比 100% 更“小”或更“大”，请阅读here.

谢谢各位。 :)

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

值得注意的是，在这种情况下 (line-height)，百分比和 em 单位通常是相同的。 1em = 1 行高
“一般”是什么意思？ :)
em 总是相对于当前元素的字体大小（除非在字体大小本身上使用单位，那么它是相对于父元素的字体大小）。 % 是相对于特定属性的父级值（width: x%; 表示：占父级宽度的x 百分比）。

【解决方案3】：

1em = 100%、2em = 200%、1,4 em = 140% 等等。但是，它实际上是依赖于上下文的。

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

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

【讨论】：

这正是我一直在寻找的答案。你告诉我 ems 和 percents 实际上是一样的，除了移动支持。我做对了吗？我真的不明白你在第二个笔记上说的是什么。如果它们是相同的，但 em 得到更好的支持，我们为什么不直接使用 em 并丢弃百分比？
在使用上有一些细微的差别。据我所知，您使用 EM 来确定字体大小。根据我的经验，ems 比手机更适合百分比。对我来说，它只会减少麻烦。我忘记了一件事。是的，1em = 100%，但是当父标签的字体大小声明为“小”、“中”或“大”时，它会发生一些变化 - 请阅读我的编辑。
我已经阅读了这篇文章，现在我对它有了更多的了解。但是仍然......我不明白为什么那个浏览器的设置有问题；我以为他们应该是一样的......
浏览器设置取决于用户，所以这实际上不是问题:)。百分比和 em 都是相对的。不同之处在于它们是相对的。
哪个是...？这是这里的主要问题，伙计们 - 有什么区别。 XD