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 实现全屏高度（注意移动端地址栏问题）。
————————————————
版权声明：本文为CSDN博主「慧一居士」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/bsklhao/article/details/149283030

posted @ 2026-03-19 21:27 a318013800 阅读(82) 评论(0) 收藏举报

刷新页面返回顶部

CSS 中px、em、rem、%、vw、vh、vm、rpx、fr 介绍和区别对比

公告