CSS 长度单位对比

问题

CSS 中 px、em、rem、vh、vw 这些长度单位有什么区别？

解答

px（像素）

px 是绝对长度单位，表示显示器上的一个个像素点。每个像素点大小相同，px 的大小和元素的其他属性无关。

虽然移动端存在设备像素比导致实际显示大小不确定，但 px 本身仍是绝对单位。

em（相对父元素）

em 是相对长度单位，相对于当前元素的字体大小。如果当前元素未设置字体大小，则相对于浏览器默认字体大小（16px）。

为了简化换算，通常在 body 中设置 font-size: 62.5%，使 1em = 10px。

html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
}

.big {
  font-size: 1.4em; /* 14px */
}

.small {
  font-size: 1.2em; /* 12px，相对于父元素 .big */
}

<div class="big">
  我是14px=1.4em
  <div class="small">我是12px，但因为继承，实际是 1.2 * 14px</div>
</div>

em 的特点：

• 值不固定，会继承父级元素的字体大小
• 使用级联方式计算，可能导致复杂的嵌套计算

rem（相对根元素）

rem 是相对长度单位，只相对于 HTML 根元素的 font-size 值，不会像 em 那样层层继承。

html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
}

.box {
  font-size: 1.4rem; /* 14px */
  padding: 1rem; /* 10px */
}

无论元素嵌套多深，1rem 始终等于根元素字体大小。

vh、vw（视口单位）

vw 和 vh 相对于视口（viewport）的宽度和高度：

• 100vw = 视口宽度
• 100vh = 视口高度
• 50vw = 视口宽度的一半

.full-screen {
  width: 100vw;
  height: 100vh;
}

.half-width {
  width: 50vw;
}

视口的定义：

• 桌面端：浏览器可视区域
• 移动端：布局视口

vh/vw 与百分比的区别：

• 百分比相对于父元素
• position: absolute 的百分比相对于已定位的父元素
• position: fixed 的百分比相对于视口
• vh/vw 始终相对于视口

关键点

• px 是绝对单位，适合精确控制尺寸
• em 相对于当前元素字体大小，会继承父元素，容易产生复杂的嵌套计算
• rem 相对于根元素字体大小，不受父元素影响，适合响应式布局
• vh/vw 相对于视口尺寸，适合全屏布局和响应式设计
• 移动端响应式开发推荐使用 rem 或 vw/vh