CSS基础教程（五十三）单位：CSS单位大乱斗：PX、EM、REM、VW……谁才是适配之王？

在前端开发的江湖中，CSS就像是我们手中的画笔，而CSS单位，则是调色盘上最基础也最关键的颜料。你可能会说：“不就是个单位吗？用px走天下不就完了？” 哦，我亲爱的朋友，如果真是这样，那你的网站在手机、平板、手表、大屏电视上看起来，可能会像一场行为艺术——布局错乱、文字忽大忽小，用户体验堪比在迷宫里找出口。

选择正确的CSS单位，就像是给网站穿上了一身弹性十足的瑜伽服，无论设备屏幕如何变化，它都能优雅地伸展和收缩，保持完美体态。今天，我们就来一场“CSS单位大乱斗”，深度剖析几位核心选手，并附上硬核示例，让你彻底搞懂它们，从此成为响应式布局的“太极宗师”。

第一回合：绝对单位的王者——PX

选手简介：px（像素）是绝对单位中的老大哥，也是我们最熟悉的老朋友。1像素就代表屏幕上的一个物理像素点。它的特点是固定不变，说一不二。

性格分析：固执，可靠，但缺乏灵活性。在需要精确控制的场景下（比如边框宽度、图标大小），它是无可替代的王者。但在需要随环境变化的文本和布局中，它就显得有些死板，是导致早期网页在移动端需要手动缩放才能看清的“元凶”之一。

实战示例：
我们用它来画一个精确的边框和图标。

.button {
  border: 2px solid #333; /* 边框用px，非常合适 */
  padding: 10px 15px;
}

.icon {
  width: 16px; /* 图标保持固定尺寸 */
  height: 16px;
}

<button class="button"><span class="icon">❤</span> 点赞</button>

效果：按钮的边框和图标大小在任何设备上都会保持一致。

第二回合：相对单位的灵动双子——EM 和 REM

这是相对单位阵营里最著名的两位兄弟，它们的大小都基于字体尺寸，但参考对象不同，因此性格迥异。

选手A：EM - “继承”主义者

选手简介：em是一个相对单位，它的值不是固定的，而是相对于当前元素的字体大小（font-size）。如果当前元素没有设置，则逐层向上继承，最终相对于根元素的字体大小。

性格分析：心