何时在CSS中使用ems而不是百分比？

Question

我最近一直在努力学习响应式编码,而我所经历的书籍和教程在使用ems和百分比之间不断变化.所以我想知道,什么时候使用ems是合适的,何时使用百分比是合适的？

Answer 1

只是为了澄清其他答案,ems不会级联,但百分比会.可以这样想:ems是相对于当前元素的,百分比是相对于容器的.因此,使用百分比来指定div内div的宽度确实会使内部的div比外部更小(或更大),但使用ems指定相同嵌套div的宽度将特别使它们成为您期望的宽度他们是.通常,如果您想要响应式设计,则应使用ems指定字体排版和百分比以指定元素大小.

Answer 2

这确实是一种偏好。有些人会告诉你设置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内部元素。