关于在 CSS 中使用 em 作为单位的问题
在公司实习,前端框架采用 Amaze UI, 看到前辈在自己的样式表里边通篇都是使用 em 作为单位的,不管是设置 width 还是 padding, 他说 em 可以“缩放”,以适应不同的屏幕尺寸。我之前掌握的知识是 em 是相对的单位。但是前辈说 em 大概是14px。请问这是怎么回事?这里的 em 是一个具体的值吗?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
em的值取决于根元素的字体大小,浏览器默认字号一般是16像素,那么1em就是16像素,内外边距的尺寸用em就是相对于该元素的字体尺寸,如果你要让h1和h4都设底部边距1em,实际看到的边距是不一样的,因为h1和h4的默认字号不一样,如果要一样的边距,推荐用rem,这个将始终相对于根元素的字号大小,基于上面的例子将会看到两个标题的下边距都是16像素,需要注意的是rem的浏览器支持问题。手机码字,不详见谅!
em等于当前字体的尺寸。而一般情况下font-size的确大多是14px。
em和百分比就是两种计算尺寸的方式。前者可以使整个网页随着font-size的改变而整体缩放。而百分比则是使整个网页随着最外层容器的宽高整体缩放。
CSS规定了两种类型的长度单位:
1.绝对长度单位:CSS支持五种绝对单位
in ---> 英寸
cm ---> 厘米
mm ---> 毫米
pt ---> 磅(1磅等于1/72英寸)
pc ---> pica(1pica等于12磅)
2.相对长度单位:
em ---> 与元素字号挂钩
ex ---> 与元素字体的“x高度”挂钩
rem ---> 与根元素的字号挂钩
px ---> CSS像素(假定显示设备的分辨率为96dpi)
% --->另一属性值的百分比
在CSS中,1个"
em
"定义为一种给定字体的font-size
值。如果一个元素的font-size
为14像素,那么对于该元素,1em
就等于14像素。显然,这个值可能随元素的不同而不同(题主,1em不是一个具体值)。(摘自《CSS权威指南(第3版)》)