导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

🔥 css 的单位有哪些，你常用的有哪些

px, %, em, rem, vw/vh

• 使用 px ，结合 Media Query 进行阶梯式的适配
• 使用 % ，按百分比自适应布局
• em，相对单位，相对于父元素的字体大小
• rem，也是相对单位，相对于根元素 html。使用rem，结合 html 元素的 font-size 来根据屏幕宽度适配
• 使用 vw、vh，直接根据视口宽高适配。

1. 在视觉稿要求固定尺寸的元素上使用 px。比如 1px 线，4px 的圆角边框。
2. 在字号、（大多数）间距上使用 rem。
3. 慎用 em。

慎用 em 的原因

**em 会叠加计算。**在这个机制下太容易犯错了，因为你不知道这段 CSS 指定的字号具体是多少。

<!-- HTML -->
<span>
  abc
  <span>def</span>
  abc
</span>

<!-- CSS -->
<style>
  span { font-size: 1.5em; }
</style>

实际效果：

先要搞清楚 em 的计算原理，它是根据当前元素的字号按比例计算的。

外层 span 的字号是 16px（浏览器默认值），所以 1.5em 之后是 24px。由于字号是继承的，导致内层 span 的字号继承过来是 24px，再经过 1.5em 之后就成了 36px。

所以，就算要用 em 的话，尽量不要用在继承属性（font-size）上，除非你真的清楚你在做什么！