在前端开发中，rem、em、rpx、px 和 vw 是常用的单位，它们各自的用途和计算方式不同，适用于不同的场景。以下是它们的详细对比：
1. px (像素)
- 定义：绝对单位，表示设备屏幕上的实际像素点。
- 特点：
- 固定大小，与其他元素或视口无关。
- 不会根据屏幕大小或分辨率变化。
- 优点：适合需要精确布局的场景，例如边框宽度、图标大小等。
- 缺点：在响应式设计中灵活性较差。
- 示例：
div { width: 100px; }
2. em
- 定义：相对单位，表示相对于父元素的
font-size。 - 特点：
- 值随父元素的
font-size变化。 - 如果父元素的
font-size是 16px，1em = 16px。 - 累积效应：嵌套的
em会基于父元素计算。
- 值随父元素的
- 优点：适合需要相对大小的场景，比如字体大小、内外边距等。
- 缺点：嵌套使用时可能导致难以预测的值。
- 示例：
/* 假设父元素 font-size: 16px */ div { font-size: 1.5em; /* 1.5 × 16px = 24px */ }
3. rem (root em)
- 定义：相对单位，表示相对于根元素（
<html>）的font-size。 - 特点：
- 始终基于根元素的
font-size计算。 - 不会累积，避免了
em的嵌套问题。
- 始终基于根元素的
- 优点：适合响应式布局，便于全局调整字体或尺寸。
- 缺点：对根元素的
font-size有依赖。 - 示例：
/* 假设 html 的 font-size: 16px */ div { font-size: 2rem; /* 2 × 16px = 32px */ }
4. rpx (响应式像素)
- 定义：相对单位，常用于小程序开发（如微信小程序），表示相对于屏幕宽度的单位。
- 特点：
- 在屏幕宽度为 750px 时，
1rpx = 1px。 - 根据设备屏幕宽度自动适配，屏幕宽度越宽，每个
rpx占用的实际像素点越多。
- 在屏幕宽度为 750px 时，
- 优点：适合多种设备的响应式设计，尤其在小程序中。
- 缺点：仅适用于特定的开发环境（如微信小程序）。
- 示例：
/* 小程序中的样式 */ div { width: 750rpx; /* 宽度占满屏幕 */ }
5. vw (视口宽度)
- 定义：相对单位，表示视口宽度的百分比。
- 特点：
1vw = 视口宽度的 1%。- 会随着视口的大小变化。
- 优点：适合全屏布局或自适应设计。
- 缺点：在小屏幕上可能导致内容过小或过大。
- 示例：
div { width: 50vw; /* 占视口宽度的 50% */ }
对比表格
| 单位 | 定义 | 参考值 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|---|---|
| px | 绝对单位 | 固定像素点 | 精确，简单 | 不适应屏幕变化 | 边框、图标等精确尺寸 |
| em | 相对于父元素的字体大小 | 父元素 font-size × 值 | 灵活，继承性好 | 嵌套时值难以预测 | 字体大小、内外边距 |
| rem | 相对于根元素的字体大小 | 根元素 font-size × 值 | 易于全局调整，避免嵌套问题 | 依赖根元素的字体大小 | 响应式字体、间距 |
| rpx | 小程序中的相对单位 | 屏幕宽度 / 750 | 自动适配不同屏幕 | 仅适用于小程序环境 | 小程序中的响应式设计 |
| vw | 视口宽度的百分比 | 视口宽度 × 值 | 自动适配视口变化 | 小屏幕内容可能过小或过大 | 全屏布局，宽度自适应 |
使用建议
- px：用于需要固定像素的元素，例如边框、图标。
- em：用于需要基于父元素字体大小变化的场景。
- rem：用于响应式设计，全局字体大小或布局调整。
- rpx：微信小程序中优先选择，适配多设备。
- vw：适合全屏布局或需要相对视口宽度变化的场景。
