前端常用单位em/px/rem/vh/vm到底有什么区别？

一、单位分类

在css的单位中，可以把单位分为两类：长度单位 ，绝度单位，如下表：

分类	单位
相对长度单位	em, ex, ch, rem, vw, vh, %, vmin, vmax
绝对长度单位	cm, mm , in, px, pt, pc

本文分析的是前端开发中常用单位 em、px、rem、vh、vw、% 的详细对比，从原理、特点、适用场景及示例进行说明：

二、相同点

用途：都用于定义元素的尺寸（如宽高、字体大小、边距等）。
响应式支持 ：除 px 外，其他单位均可用于响应式设计，能根据环境动态调整。
相对性 ：em、rem、vh、vw、% 均为相对单位，依赖某个基准值计算。

三、区别详解

1. `px`（像素）

原理：
- 绝对单位，基于屏幕物理像素，与设备分辨率直接相关。
特点：
- 固定大小，不受父级或视口影响。
- 高分辨率屏幕（如 Retina 屏）下可能显示过小。
适用场景：
- 边框（border: 1px）、阴影（box-shadow）等需精确控制的属性。
- 小图标（width: 16px）或固定尺寸元素。

示例：

css 复制代码

.button {
  padding: 8px 16px; /* 固定内边距 */
  border: 1px solid #ccc; /* 固定边框 */
}

AI写代码css
1234

2. `em`（相对父元素字体大小）

原理：
- 相对单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。
- 若父元素 font-size: 16px，则 1em = 16px。
特点：
- 嵌套层级影响 ：多层嵌套时，子元素的 em 会逐级累乘父级 font-size。
- 适合与父元素联动的场景。
适用场景：
- 段落内边距（padding: 1em）。
- 按钮或图标组件（需与父字体大小同步调整）。

示例：

css 复制代码

.parent {
  font-size: 16px;
}
.child {
  padding: 1em; /* 实际为 16px */
  margin-left: 2em; /* 实际为 32px */
}

AI写代码css
1234567

3. `rem`（相对根元素字体大小）

原理：
- 相对单位 ，基于**根元素（<html>）**的 font-size。
- 默认根元素 font-size: 16px，因此 1rem = 16px。
特点：
- 全局基准：不受嵌套层级影响，统一基于根元素。
- 适合响应式布局（通过修改根元素 font-size 调整全局比例）。
适用场景：
- 全局布局（如容器宽高 width: 20rem）。
- 响应式文字大小（结合媒体查询动态修改根元素字号）。

示例：

css 复制代码

html {
  font-size: 16px; /* 1rem = 16px */
}
.container {
  width: 40rem; /* 实际为 640px */
  padding: 2rem; /* 实际为 32px */
}

AI写代码css
1234567

4. `vh`/`vw`（视窗高度/宽度百分比）

原理：
- 相对单位，基于**视口（Viewport）**的尺寸。
- 1vh = 视口高度的 1%，1vw = 视口宽度的 1%。
特点：
- 视口变化时自动适配，适合全屏布局。
- 移动端需注意浏览器导航栏可能影响实际视口高度。
适用场景：
- 全屏背景容器（height: 100vh）。
- 视口比例布局（如轮播图宽度 width: 50vw）。

示例：

css 复制代码

.hero-section {
  height: 100vh; /* 占满整个视口高度 */
  width: 80vw;   /* 视口宽度的 80% */
}

AI写代码css
1234

5. `%`（百分比）

原理：
- 相对单位 ，基于父元素对应属性的百分比。
- 不同属性的基准不同（如 width: 50% 基于父宽度，padding-top: 50% 也基于父宽度）。
特点：
- 依赖父元素的明确尺寸定义，否则可能失效。
- 适合流式布局和比例控制。
适用场景：
- 栅格系统（width: 33.33%）。
- 图片容器宽高比例（如 padding-top: 56.25% 实现 16:9 比例）。

示例：

css 复制代码

.parent {
  width: 600px;
}
.child {
  width: 50%; /* 实际为 300px */
  padding-top: 25%; /* 实际为 150px（基于父宽度） */
}

AI写代码css
1234567

四、对比总结

单位	基准	响应式适配性	典型场景	特点
`px`	绝对像素	❌ 差	边框、固定尺寸元素	固定值，不随环境变化
`em`	父元素字体大小	✅ 中	嵌套组件（如按钮）	嵌套层级影响计算结果
`rem`	根元素字体大小	✅ 强	全局布局、响应式设计	全局统一基准
`vh`	视窗高度	✅ 强	全屏容器	视口高度适配
`vw`	视窗宽度	✅ 强	视口宽度适配（如轮播图）	视口宽度适配
`%`	父元素对应属性	✅ 中	流式布局、宽高比例控制	依赖父元素明确尺寸

五、使用建议

优先 rem ：全局布局使用 rem，通过动态修改根元素 font-size 实现响应式。
视口适配用 vh/vw：全屏区块或视口比例布局时使用。
慎用 em：仅在需要与父元素联动的场景（如按钮内边距）。
% 需父级明确尺寸：确保父元素有明确尺寸后再使用百分比。
px 用于细节控制：边框、阴影等需要固定值的场景。

示例综合应用：

css 复制代码

html {
  font-size: 16px; /* 1rem = 16px */
}

.responsive-box {
  width: 80vw;      /* 视口宽度的 80% */
  padding: 2rem;    /* 32px */
  margin: 1em;      /* 基于父元素字体大小（假设父元素字体为默认16px，则为16px） */
  border: 2px solid #000;
}

.fullscreen-section {
  height: 100vh;    /* 全屏高度 */
  background: #f0f0f0;
}

AI写代码css

前端常用单位em/px/rem/vh/vm到底有什么区别？

一、单位分类

二、相同点

三、区别详解

1. px（像素）

2. em（相对父元素字体大小）

3. rem（相对根元素字体大小）

4. vh/vw（视窗高度/宽度百分比）

5. %（百分比）

四、对比总结

五、使用建议

1. `px`（像素）

2. `em`（相对父元素字体大小）

3. `rem`（相对根元素字体大小）

4. `vh`/`vw`（视窗高度/宽度百分比）

5. `%`（百分比）