CSS 单位详解：px、em、rem、%、vw、vh、vmax、vmin
在 CSS 中，我们经常使用各种单位来定义元素的尺寸、间距和字体大小。不同的单位有不同的特性和适用场景，理解它们的区别对于编写响应式和灵活的 CSS 代码非常重要。
px（像素）
px 就是 pixel 的缩写，表示像素。px 是画面中的最小的一个点，一张位图就是由无数个像素点组成的。
特点：
- 绝对单位，不会随着其他元素的变化而改变
- 适合需要精确控制的场景
- 在不同设备上显示效果可能不一致
em
em 是一个相对单位，其值会随着上下文的变化而变化。
规则：
- 当用于
font-size属性时，表示"父元素的字体大小" - 当用于其他属性时，表示"自身的字体大小"
示例：
.parent { font-size: 16px; }
.child {
font-size: 1.5em; /* 24px (16px × 1.5) */
margin: 1em; /* 24px (相对于自身的字体大小) */
}
rem
rem 是相对于根元素（<html>）的 font-size 的相对单位。
特点：
- 始终相对于根元素的字体大小
- 不受父元素字体大小影响
- 非常适合创建响应式布局
示例：
html { font-size: 16px; }
.element {
font-size: 1.5rem; /* 24px (16px × 1.5) */
margin: 2rem; /* 32px (16px × 2) */
}
%（百分比）
% 是相对单位，通常相对于父元素，但对于定位元素是相对于定位父元素。
使用场景：
- 宽度、高度、边距等属性
- 创建响应式布局
- 相对于父容器进行缩放
示例：
.container { width: 100%; } /* 占满父容器宽度 */
.child { width: 50%; } /* 占父容器宽度的一半 */
vw（视口宽度）
vw 相对于视口的宽度百分比，1vw = 1% of viewport width。
特点：
- 直接相对于浏览器视口宽度
- 不受父元素影响
- 适合创建全屏响应式设计
示例：
.full-width { width: 100vw; } /* 占满整个视口宽度 */
.half-width { width: 50vw; } /* 占视口宽度的一半 */
vh（视口高度）
vh 相对于视口高度百分比，1vh = 1% of viewport height。
特点：
- 直接相对于浏览器视口高度
- 适合创建全屏高度的布局
- 常用于创建全屏背景或模态框
示例：
.full-height { height: 100vh; } /* 占满整个视口高度 */
.half-height { height: 50vh; } /* 占视口高度的一半 */
vmax（视口最大值）
vmax 相对于视口的宽度、高度中较大的那一个的百分比。
特点：
- 取视口宽度和高度中的较大值作为参考
- 适合需要同时考虑宽度和高度的场景
示例：
.responsive-size {
font-size: 5vmax; /* 字体大小基于视口较大边 */
}
vmin（视口最小值）
vmin 相对于视口的宽度、高度中较小的那一个的百分比。
特点：
- 取视口宽度和高度中的较小值作为参考
- 确保元素在任何方向都不会超出视口
示例：
.safe-size {
font-size: 4vmin; /* 字体大小基于视口较小边 */
}
总结与选择建议
选择单位的一般原则：
- px：需要精确控制时使用
- em：相对于父元素字体大小时使用
- rem：创建响应式布局时的首选
- %：相对于父容器进行缩放时使用
- vw/vh：创建全屏响应式设计时使用
- vmax/vmin：需要同时考虑宽度和高度时使用
最佳实践：
- 使用
rem作为字体大小的主要单位 - 使用
%和vw/vh创建响应式布局 - 避免过度使用
px，特别是在需要响应式的场景中