CSS 单位详解

理解 px/em/rem/vw/vh/% 的区别 · 难度：进阶 · +15XP

CSS 单位详解

CSS 提供多种单位用于设置尺寸、间距和位置。选择合适的单位对于创建响应式和可维护的布局至关重要。CSS 单位分为绝对单位和相对单位两大类。

绝对单位

绝对单位在任何设备上都保持相同的实际大小。最常用的是 px（像素）。

div {
  width: 300px;
  font-size: 16px;
  margin: 20px;
}
/* 其他绝对单位（较少使用） */
div.print {
  width: 2cm;    /* 厘米 */
  width: 20mm;   /* 毫米 */
  width: 1in;    /* 英寸 */
  width: 72pt;   /* 磅（1pt = 1/72in） */
  width: 6pc;    /* pica（1pc = 12pt） */
}

相对单位 - em 和 rem

em 相对于父元素的字体大小，rem 相对于根元素（html）的字体大小。rem 更易于管理，推荐在布局中使用。

html {
  font-size: 16px;  /* 根字体大小 */
}
/* rem 相对于根元素 */
h1 { font-size: 2rem; }     /* 32px */
p  { font-size: 1rem; }     /* 16px */
small { font-size: 0.875rem; } /* 14px */
/* em 相对于父元素 */
.parent {
  font-size: 20px;
}
.parent .child {
  font-size: 1.5em;  /* 30px（20px * 1.5） */
  padding: 0.5em;    /* 15px（30px * 0.5） */
}

视口单位 vw、vh、vmin、vmax

视口单位相对于浏览器窗口的大小。1vw = 视口宽度的 1%，1vh = 视口高度的 1%。

/* 全屏 hero 区域 */
.hero {
  height: 100vh;          /* 视口高度 100% */
  width: 100vw;           /* 视口宽度 100% */
}
/* 响应式字体 */
h1 {
  font-size: 5vw;  /* 字体随视口宽度缩放 */
}
/* 覆盖整个视口 */
.overlay {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
/* vmin 和 vmax */
.square {
  width: 50vmin;  /* 取 vw 和 vh 中较小的 50% */
  height: 50vmin;
}

百分比 %

百分比总是相对于父元素的相关属性。不同的属性对应不同的参照：

div {
  width: 50%;       /* 相对父元素宽度 */
  margin: 10%;      /* 相对父元素宽度！ */
  padding: 5%;      /* 相对父元素宽度！ */
  font-size: 120%;  /* 相对父元素字体大小 */
  line-height: 150%;/* 相对自身字体大小 */
}

其他现代单位

/* ch - 字符 "0" 的宽度（适合设置文本宽度） */
p.article {
  max-width: 65ch;  /* 每行约 65 个字符，最佳阅读体验 */
}
/* dvh/dvw/svh/lvh - 动态视口单位（移动端） */
.mobile-hero {
  height: 100dvh;  /* 动态视口高度，解决移动端地址栏问题 */
}
/* cqw/cqi/cqb - 容器查询单位（需配合 @container） */
.card {
  font-size: clamp(14px, 2cqi, 24px);
}

单位速查表

单位	类型	相对参照	推荐用途
px	绝对	屏幕像素	边框、细小的间距
rem	相对	根元素 font-size	字体大小、间距（推荐）
em	相对	父元素 font-size	组件内部间距、em 嵌套
%	相对	父元素	宽度、flex 布局
vw/vh	相对	视口宽/高	全屏布局、响应式字体
dvh	相对	动态视口高	移动端全屏（推荐）
ch	相对	字符"0"宽度	文本段落最大宽度
vmin/vmax	相对	视口小/大边	保持宽高比的元素

???? 练习

1. 使用 rem 设置页面全局字体大小，并用它定义 h1-h6 的字号层级
2. 创建一个 100vh 高度的全屏 hero 区域
3. 使用 vw 单位让标题字体随窗口宽度自适应缩放
4. 用 max-width: 65ch 限制文章段落的阅读宽度
5. 对比 em 和 rem 在嵌套元素中的表现差异