CSS 单位详解：px、rem、em、vw/vh 的区别与使用场景

在 CSS 中，各种单位有不同的特性和适用场景，理解它们的区别对实现响应式布局至关重要。

1. 绝对单位 px

特点：

像素（Pixel）是绝对长度单位
1px 对应屏幕上的一个物理像素点（在高清屏上可能对应多个物理像素）
固定大小，不随其他因素改变

使用场景：

css 复制代码

.border {
  width: 1px; /* 细边框 */
}
.icon {
  width: 24px; /* 固定尺寸图标 */
}

优点： 精确控制元素尺寸
缺点： 在响应式设计中不够灵活

2. 相对单位 rem

特点：

相对于根元素(html)的字体大小
默认情况下，1rem = 16px（浏览器默认字号）
可通过修改html字体大小改变所有rem单位的值

使用方式：

css 复制代码

html {
  font-size: 62.5%; /* 1rem = 10px (16px×62.5%) */
}
.box {
  width: 20rem; /* 200px */
  padding: 1.5rem; /* 15px */
}

响应式适配方案：

javascript 复制代码

// 根据设计稿宽度动态设置rem基准值
document.documentElement.style.fontSize = 
  (document.documentElement.clientWidth / 设计稿宽度) * 100 + 'px';

优点： 方便整体缩放，适配不同屏幕
缺点： 需要计算转换

3. 相对单位 em

特点：

相对于当前元素或父元素的字体大小
1em = 当前元素的font-size值
多层嵌套时会产生复合效果

使用示例：

css 复制代码

.parent {
  font-size: 20px;
}
.child {
  padding: 1em; /* 20px */
  margin: 0.5em; /* 10px */
}
.button {
  font-size: 1.2em; /* 相对于父级字体 */
  padding: 0.8em 1.5em; /* 相对于自身字体 */
}

优点： 适合组件内部相对尺寸
缺点： 嵌套复杂时计算困难

4. 视口单位 vw/vh

特点：

vw (viewport width): 1vw = 视口宽度的1%
vh (viewport height): 1vh = 视口高度的1%
vmin/vmax: 取vw/vh中较小/较大的值

使用场景：

css 复制代码

.header {
  height: 10vh; /* 视口高度的10% */
}
.banner {
  width: 80vw; /* 视口宽度的80% */
}
.modal {
  width: min(90vw, 1200px); /* 不超过1200px */
}

优点： 直接响应视口变化
缺点： 小屏幕上可能太小，大屏幕上可能太大

5. 单位对比表

单位	基准	是否响应式	典型应用场景
px	绝对	否	边框、固定尺寸元素
rem	根元素字体	是	整体布局、间距
em	当前/父元素字体	是	文本相关、按钮内边距
vw/vh	视口尺寸	是	全屏元素、大尺寸布局
%	父元素	是	流式布局、宽度高度

6. 实际开发建议

混合使用原则
- 使用rem设置主要布局尺寸
- 使用px设置边框、阴影等固定样式
- 使用em设置文本相关和组件内部间距
- 使用vw/vh设置全屏元素
移动端适配方案

css 复制代码

/* 基于750px设计稿的rem适配 */
html {
  font-size: calc(100vw / 7.5); /* 100vw/750×100 */
}
/* 使用时直接除以100 */
.box {
  width: 3.2rem; /* 设计稿320px */
}

现代CSS方案

css 复制代码

.container {
  width: clamp(300px, 80vw, 1200px); /* 最小值、理想值、最大值 */
  padding: max(2vw, 10px); /* 取较大值 */
}

理解这些单位的差异并根据场景合理选择，可以创建出既精确又灵活的响应式布局。