CSS 中px、em、rem、%、vw、vh、vm、rpx、fr 介绍和区别对比
CSS 单位详解：px、em、rem、%、vw、vh、vmin/vmax、rpx、fr
以下是各单位的定义、特点、区别及使用场景对比：
1. px（像素）
- 定义：绝对单位，表示屏幕上的一个物理像素点。
- 特点：
- 固定尺寸，不受其他因素影响。
- 在高分辨率屏幕上可能显示过小（需配合
viewport缩放）。
- 场景：边框、固定尺寸元素（如图标）。
- 示例：
.box { width: 200px; } /* 固定宽度200像素 */
2. em（相对父元素字体大小）
- 定义：相对单位，基于当前元素或父元素的
font-size。- 若自身未设置
font-size，则继承父级。
- 若自身未设置
- 特点：
- 具有级联效应（嵌套元素尺寸会逐层放大/缩小）。
- 场景：段落内边距、按钮大小（与字体关联）。
- 示例：
.parent { font-size: 16px; } .child { padding: 1em; } /* 16px × 1 = 16px */
3. rem（相对根元素字体大小）
- 定义：相对单位，基于根元素（
<html>） 的font-size。 - 特点：
- 避免级联问题，全局统一基准。
- 默认基准为
16px（可修改html { font-size: 62.5%; }→1rem=10px）。
- 场景：响应式布局、整体页面缩放。
- 示例：
html { font-size: 20px; } .box { width: 5rem; } /* 100px (20px × 5) */
4. %（百分比）
- 定义：相对单位，基于父元素的对应属性值。
- 特点：
width/height：相对于父元素宽高。padding/margin：水平方向相对于父元素宽度，垂直方向也相对于父元素宽度（非高度！）。font-size：相对于父元素的字体大小。
- 场景：流式布局、自适应容器。
- 示例：
.parent { width: 300px; } .child { width: 50%; } /* 150px */
5. 视窗单位：vw / vh / vmin / vmax
- 定义：
vw：视窗宽度的 1%（100vw = 100% 视窗宽度）。vh：视窗高度的 1%（100vh = 100% 视窗高度）。vmin：取vw和vh中较小值的 1%。vmax：取vw和vh中较大值的 1%。
- 特点：直接关联视窗尺寸，与父元素无关。
- 场景：全屏布局、响应式字体。
- 示例：
.banner {width: 80vw; /* 视窗宽度的80% */height: 50vh; /* 视窗高度的50% */font-size: 4vmin; /* 字体大小自适应较小视窗尺寸 */ }
6. rpx（微信小程序专用）
- 定义：微信小程序自适应单位，以
750rpx = 100% 屏幕宽度为基准。 - 特点：
- 设计稿按
750px宽度时，1px = 1rpx。 - 自动根据屏幕宽度缩放（如
375px宽屏 →1rpx = 0.5px）。
- 设计稿按
- 场景：微信小程序跨设备适配。
- 示例：
.box { width: 375rpx; } /* 在750px宽屏为375px，在375px宽屏为187.5px */
7. fr（Grid 布局专用）
- 定义：CSS Grid 中弹性单位，表示剩余空间分配比例。
- 特点：
- 仅用于
grid-template-columns/grid-template-rows。 - 按比例分配容器剩余空间（扣除固定尺寸后）。
- 仅用于
- 场景：网格布局中的弹性列/行。
- 示例：
.container {display: grid;grid-template-columns: 100px 1fr 2fr; /* 第一列固定100px，剩余空间按1:2分配 */ }
单位对比总结表
| 单位 | 基准对象 | 是否响应式 | 级联性 | 典型场景 |
|---|---|---|---|---|
px | 设备像素 | ❌ | - | 边框、固定尺寸元素 |
em | 当前元素/父元素字体 | ✅ | 有 | 与字体关联的内边距/外边距 |
rem | 根元素（<html>）字体 | ✅ | ❌ | 全局响应式布局 |
% | 父元素对应属性 | ✅ | - | 流式布局、自适应容器 |
vw/vh | 视窗宽/高 | ✅ | ❌ | 全屏元素、视窗比例布局 |
vmin | 视窗宽高中较小值 | ✅ | ❌ | 确保在小视窗方向上的适应性 |
vmax | 视窗宽高中较大值 | ✅ | ❌ | 确保在大视窗方向上的可见性 |
rpx | 小程序屏幕宽度（750px） | ✅ | ❌ | 微信小程序适配 |
fr | Grid 容器剩余空间 | ✅ | ❌ | Grid 布局中的弹性空间分配 |
使用建议：
- 响应式布局：优先
rem+ 媒体查询修改根字体，或vw/vh。 - 小程序开发：统一使用
rpx适配多端。 - Grid/Flex 布局：结合
fr、%和auto实现灵活空间分配。 - 避免级联问题：用
rem替代em除非需要级联效果。 - 全屏元素：使用
100vh实现全屏高度（注意移动端地址栏问题）。