CSS常用长度单位px、em、rem、vh、vw的差异解析
2025/3/7
介绍CSS中px、em、rem、vh、vw这几种常用长度单位的定义、特点、示例，以及在实际开发中的运用方式。
在CSS中，px、em、rem、vh、vw 是常用的长度单位，它们各自有不同的用途和特点。以下是它们的详细区别：
1. px (像素)
- 定义:
px是绝对单位，表示屏幕上的一个物理像素点。 - 特点:
- 固定大小，不受其他因素影响。
- 适合用于需要精确控制的场景，如图标、边框等。
- 示例:
.element { width: 100px; /* 宽度为100像素 */ }
2. em
- 定义:
em是相对单位，相对于当前元素的字体大小（font-size）。 - 特点:
- 如果当前元素没有设置字体大小，则继承父元素的字体大小。
- 适合用于需要相对于字体大小进行缩放的场景，如内边距、外边距等。
- 示例:
.element { font-size: 16px; padding: 2em; /* 内边距为32px (16px * 2) */ }
3. rem (Root EM)
- 定义:
rem是相对单位，相对于根元素（<html>）的字体大小。 - 特点:
- 不受父元素字体大小的影响，始终相对于根元素的字体大小。
- 适合用于需要全局统一的缩放比例的场景，如布局、间距等。
- 示例:
html { font-size: 16px; } .element { font-size: 1.5rem; /* 字体大小为24px (16px * 1.5) */ }
4. vh (Viewport Height)
- 定义:
vh是相对单位，相对于视口高度的百分比。 - 特点:
- 1vh 等于视口高度的1%。
- 适合用于需要根据视口高度进行布局的场景，如全屏背景、高度自适应等。
- 示例:
.element { height: 50vh; /* 高度为视口高度的50% */ }
5. vw (Viewport Width)
- 定义:
vw是相对单位，相对于视口宽度的百分比。 - 特点:
- 1vw 等于视口宽度的1%。
- 适合用于需要根据视口宽度进行布局的场景，如响应式设计、宽度自适应等。
- 示例:
.element { width: 75vw; /* 宽度为视口宽度的75% */ }
总结
px: 固定单位，适合精确控制。em: 相对单位，相对于当前元素的字体大小。rem: 相对单位，相对于根元素的字体大小。vh: 相对单位，相对于视口高度。vw: 相对单位，相对于视口宽度。
在实际开发中，通常会结合使用这些单位来实现灵活的布局和响应式设计。例如，使用 rem 来控制字体大小和布局，使用 vh 和 vw 来控制视口相关的尺寸，使用 px 来精确控制某些元素的尺寸。