5

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

4

3 回答 3

6

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

于 2013-09-25T21:25:47.163 回答
1

这确实是一种偏好。有些人会告诉你设置body{font-size: 62.5%;}（如果浏览器的默认值为 16px，则为 10px），然后从那时起使用ems。所以，如果你想要一个 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为文档中的任何父元素设置值，则浏览器的默认字体大小（很可能是 16 像素）== 1em。

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

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

在这两种情况下要注意的问题是它们都是级联的，这意味着如果您设置了两个类font-size: 2em并嵌套它们，那么您将拥有4em内部元素。

于 2013-06-07T18:54:43.860 回答
0

em 和 % 都适用于响应式网页设计。
正如大家所说，em 通常用于定义字体大小和元素<div>大小的 %。
但是根据我的经验，我发现当元素内部有字体时，对元素使用 % 可以使元素根据其中的字体长度进行调整。
例如，如果元素内的语句以 20px 完成，则 100% 将给它 20px，如果它以 10px 完成，则 100% 的 div 将给它 10px。
因此，如果您要为 div 进行一些设计，其中您有一些字体/单词，最好使用 em 来精确。

于 2016-01-07T11:09:29.227 回答