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（相对根元素字体大小）

• 定义：相对单位，基于根元素（） 的 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	根元素（）字体	✅	❌	全局响应式布局
%	父元素对应属性	✅	-	流式布局、自适应容器
vw/vh	视窗宽/高	✅	❌	全屏元素、视窗比例布局
vmin	视窗宽高中较小值	✅	❌	确保在小视窗方向上的适应性
vmax	视窗宽高中较大值	✅	❌	确保在大视窗方向上的可见性
rpx	小程序屏幕宽度（750px）	✅	❌	微信小程序适配
fr	Grid 容器剩余空间	✅	❌	Grid 布局中的弹性空间分配

---

使用建议：

1. 响应式布局：优先 rem + 媒体查询修改根字体，或 vw/vh。
2. 小程序开发：统一使用 rpx 适配多端。
3. Grid/Flex 布局：结合 fr、% 和 auto 实现灵活空间分配。
4. 避免级联问题：用 rem 替代 em 除非需要级联效果。
5. 全屏元素：使用 100vh 实现全屏高度（注意移动端地址栏问题）。