我最近一直在尝试学习响应式编码,我读过的书籍和教程一直在使用 em 和百分比之间切换。所以我想知道,什么时候适合使用 ems,什么时候适合使用百分比?
3 回答
只是为了澄清其他答案,ems 不会级联,但百分比会级联。可以这样想:ems 是相对于当前元素的,百分比是相对于容器的。因此,使用百分比来指定 div 内部 div 的宽度确实会使内部 div 比外部 div 更小(或更大),但是使用 ems 来指定相同嵌套 div 的宽度会特别使它们成为您期望的宽度他们是。一般来说,如果你想要响应式设计,你应该使用 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
为文档中的任何父元素设置值,则浏览器的默认字体大小(很可能是 16 像素)== 1em
。
百分比的工作方式类似,因为它们相对于父容器,而不是父容器的字体大小。
body{width: 800px;}
.someClass{width: 100%;} /* 800px */
.someOtherClass{width: 200%;} /* 1600px */
.anotherClass{width: 50%;} /* 400px */
在这两种情况下要注意的问题是它们都是级联的,这意味着如果您设置了两个类font-size: 2em
并嵌套它们,那么您将拥有4em
内部元素。
em 和 % 都适用于响应式网页设计。
正如大家所说,em 通常用于定义字体大小和元素<div>
大小的 %。
但是根据我的经验,我发现当元素内部有字体时,对元素使用 % 可以使元素根据其中的字体长度进行调整。
例如,如果元素内的语句以 20px 完成,则 100% 将给它 20px,如果它以 10px 完成,则 100% 的 div 将给它 10px。
因此,如果您要为 div 进行一些设计,其中您有一些字体/单词,最好使用 em 来精确。