Responsive design 什么时候在CSS中使用ems而不是百分比？

最近我一直在尝试学习响应式编码，我所阅读的书籍和教程一直在使用ems和百分比之间不断转换。所以我想知道，什么时候使用ems合适，什么时候使用百分比合适？

这确实是一种偏好。有些人会告诉你设置

body{font size:62.5%；}

（如果浏览器的默认值为16px，则为10px），然后从那时起使用

em

s。因此，如果您想要22px的字体大小，您可以使用

2.2em

。然而，大多数开发者对此有自己的看法。有些人总是使用百分比。有些人总是使用像素

em

是相对于当前字体大小的度量，例如：

body{font-size: 16px;}
.someClass{font-size: 1em;} /* 16px */
.someOtherClass{font-size: 2em;} /* 32px */
.anotherClass{font-size: .5em;} /* 8px */

如果没有为文档中的任何父元素设置

font-size

值，则浏览器的默认（最有可能是16px）字体大小==

1em

百分比的工作原理类似，因为它们是相对于父容器的，而不是相对于父容器的字体大小

body{width: 800px;}
.someClass{width: 100%;} /* 800px */
.someOtherClass{width: 200%;} /* 1600px */
.anotherClass{width: 50%;} /* 400px */

---

在这两种情况下需要注意的问题是，它们都是级联的，这意味着如果您有两个设置为

font-size:2em

的类，并且将它们嵌套，那么内部元素上将有

4em

。

为了澄清其他答案，ems不会级联，但百分比会级联。可以这样想：ems是相对于当前元素的，百分比是相对于容器的。因此，使用百分比来指定div内部div的宽度确实会使内部div比外部div小（或大），但使用ems来指定相同嵌套div的宽度会使它们达到您期望的宽度通常，如果需要响应性设计，则应使用ems指定字体排版和百分比来指定元素大小。em和%都适用于响应性网页设计。
正如大家所说，em通常用于定义字体大小和元素的百分比，如

大小。
但根据我的经验，当元素中有字体时，使用%表示元素可以使元素根据其中字体的长度进行调整。
例如，如果元素中的语句以20px的速度完成，则100%将得到20px，如果以10px的速度完成，则100%的div将得到10px。

---

因此，如果你要给一个里面有一些字体/单词的div做一些设计，最好使用em以保持精确。

谢谢你的全面回复。如果这个回答非常无知，我很抱歉，但我对这一切都不熟悉。似乎主要使用ems进行字体大小调整是最有意义的，因为该单位基于标准字体大小，以及大多数其他标签的百分比？@BaardKolstad请记住，百分比是相对的。因此，如果父容器设置为0px，子容器的100%将为0px。答案顺序不是确定的，因此，在我阅读本文时，没有“以上”答案。不过，剩下的部分是有道理的。我相信ems确实会对

font size

属性进行级联。当您设置

字体大小：2em

时，它会将字体大小设置为父项em长度的2倍。我相信这只会发生在

字体大小

上；其他属性（如

padding:2em

）将使用当前元素的em长度。