关于在 CSS 中使用 em 作为单位的问题

发布于 2022-09-01 20:53:10 字数 169 浏览 9 评论 0

在公司实习,前端框架采用 Amaze UI, 看到前辈在自己的样式表里边通篇都是使用 em 作为单位的,不管是设置 width 还是 padding, 他说 em 可以“缩放”,以适应不同的屏幕尺寸。我之前掌握的知识是 em 是相对的单位。但是前辈说 em 大概是14px。请问这是怎么回事?这里的 em 是一个具体的值吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

沩ん囻菔务 2022-09-08 20:53:10

em的值取决于根元素的字体大小,浏览器默认字号一般是16像素,那么1em就是16像素,内外边距的尺寸用em就是相对于该元素的字体尺寸,如果你要让h1和h4都设底部边距1em,实际看到的边距是不一样的,因为h1和h4的默认字号不一样,如果要一样的边距,推荐用rem,这个将始终相对于根元素的字号大小,基于上面的例子将会看到两个标题的下边距都是16像素,需要注意的是rem的浏览器支持问题。手机码字,不详见谅!

深白境迁sunset 2022-09-08 20:53:10

em等于当前字体的尺寸。而一般情况下font-size的确大多是14px。
em和百分比就是两种计算尺寸的方式。前者可以使整个网页随着font-size的改变而整体缩放。而百分比则是使整个网页随着最外层容器的宽高整体缩放。

我纯我任性 2022-09-08 20:53:10

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版)》)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文