在 uni-app 开发中，样式单位的选择直接影响页面在不同设备上的适配效果。很多面试官都会问到：rpx、px、vw、vh 有什么区别？换算规则是什么？ 这不仅是基础题，更是考察候选人对移动端适配原理的理解深度。本文将从概念、换算、使用场景和常见坑点四个维度，帮你彻底搞懂这个问题。
一、四种单位的本质区别
1. px：绝对像素单位
px 是 CSS 中最基础的单位，表示屏幕上的物理像素点。但在移动端，它并不“绝对”——因为不同设备的像素密度（DPR）不同，同样的 px 在不同手机上显示的实际物理大小可能不一样。
在 uni-app 中，px 的行为与普通 Web 一致，不会随屏幕宽度自动缩放。如果你写 width: 100px，在 iPhone SE 和 iPhone 15 Pro Max 上，它占的屏幕比例是不同的。
2. rpx：响应式像素（uni-app 的核心单位）
rpx 是微信小程序最早提出、uni-app 全面支持的响应式单位。它的设计思路是：把屏幕宽度等分为 750 份，1 份就是 1rpx。
也就是说：
- 在 750px 设计稿上，量出多少 px，就直接写多少 rpx；
- 无论设备屏幕多宽，750rpx 永远等于屏幕总宽度。
这使得 rpx 成为 uni-app 中最推荐的布局单位，尤其适合按设计稿 1:1 还原。
3. vw / vh：视口百分比单位
vw 和 vh 是 CSS3 的标准视口单位：
1vw= 视口宽度的 1%1vh= 视口高度的 1%
在 uni-app 中，vw 和 vh 同样可用，且在小程序端也支持（微信基础库 2.9+）。它们与 rpx 的区别在于：rpx 固定以 750 为基准，而 vw/vh 直接按百分比计算，更灵活但需要手动换算。
4. 一张表看清区别
| 单位 | 基准 | 是否随屏幕缩放 | 适用场景 |
|---|---|---|---|
| px | 物理像素 | 否 | 边框、字体微调、固定尺寸 |
| rpx | 屏幕宽度 750 份 | 是 | 整体布局、宽高、间距 |
| vw | 视口宽度 1% | 是 | 全屏布局、百分比宽度 |
| vh | 视口高度 1% | 是 | 全屏高度、弹窗遮罩 |
二、换算规则详解
1. rpx 与 px 的换算
换算公式取决于设备屏幕宽度：
1rpx = 屏幕宽度 / 750 (px)
1px = 750 / 屏幕宽度 (rpx)
以 iPhone 6/7/8（375px 宽）为例：
- 1rpx = 375 / 750 = 0.5px
- 1px = 2rpx
以 iPhone 15 Pro Max（430px 宽）为例：
- 1rpx = 430 / 750 ≈ 0.573px
- 1px ≈ 1.744rpx
记忆技巧：在 375px 宽的设备上，px 与 rpx 是 1:2 的关系。设计稿若为 750px 宽，写 rpx 时数值直接照抄即可。
2. rpx 与 vw 的换算
因为 750rpx = 100vw，所以：
1rpx = 100 / 750 vw ≈ 0.1333vw
1vw = 7.5rpx
这个换算在需要混用两种单位时非常有用。比如你想让某个元素占屏幕宽度的 50%，既可以写 375rpx，也可以写 50vw。
3. vh 与 px 的换算
vh 依赖视口高度，不同设备高度差异大，一般不建议用于精确布局。换算公式：
1vh = 视口高度 / 100 (px)
例如视口高度为 667px 时，1vh = 6.67px。
4. 代码示例：动态换算
在 JS 中可以通过 uni.getSystemInfoSync() 获取屏幕宽度，手动换算：
const { screenWidth } = uni.getSystemInfoSync()
// rpx 转 px
const rpx2px = (rpx) => (rpx * screenWidth) / 750
// px 转 rpx
const px2rpx = (px) => (px * 750) / screenWidth
console.log(rpx2px(750)) // 输出 screenWidth
console.log(px2rpx(375)) // 输出 750
三、使用场景与最佳实践
1. 优先使用 rpx
- 页面整体布局、容器宽高、内外边距、字体大小，统一用 rpx；
- 设计稿宽度为 750px 时，标注多少就写多少 rpx，零换算成本。
2. px 用于不需要缩放的元素
- 1px 边框（细线）：用 rpx 可能因小数被渲染成 2px 或消失，建议用 px 或
transform: scaleY(0.5)； - 字体最小尺寸限制：部分安卓机对小于 12px 的字体有渲染限制，此时用 px 更可控。
3. vw / vh 用于全屏和百分比布局
- 全屏遮罩：
width: 100vw; height: 100vh; - 弹窗居中：配合
position: fixed使用； - 注意：小程序中 vh 可能受导航栏影响，建议用
100%替代。
4. 不要混用导致布局错乱
同一元素上混用 rpx 和 vw 容易产生舍入误差。例如 width: 375rpx + 50vw 在不同设备上可能超出屏幕。建议一个模块内统一单位。
四、面试高频追问
Q1：rpx 在小程序、H5、App 端表现一致吗？
基本一致，但 H5 端受浏览器视口影响，若页面未设置 meta viewport，rpx 基准可能异常。uni-app 已默认处理，但自定义 H5 模板时需注意。
Q2：为什么 1px 边框在部分手机上变粗？
因为设备 DPR 不同，CSS 的 1px 可能对应 2 或 3 个物理像素。解决方案：使用 0.5px（iOS 支持）、transform: scaleY(0.5) 或直接写 1rpx。
Q3：rpx 和 rem 有什么区别？
rem 基于根元素字体大小，需要 JS 动态设置 html 的 font-size；rpx 由 uni-app 编译时自动处理，无需额外脚本，更简单。
Q4：设计稿宽度不是 750 怎么办？
若设计稿为 375px，可将标注值乘以 2 得到 rpx；或使用 postcss-px-to-viewport 等插件自动转换。
五、总结
| 要点 | 结论 |
|---|---|
| rpx 基准 | 屏幕宽度 = 750rpx |
| px 与 rpx | 375px 屏上 1px = 2rpx |
| rpx 与 vw | 1vw = 7.5rpx |
| 推荐用法 | 布局用 rpx，边框用 px，全屏用 vw/vh |
| 核心原则 | 同一模块统一单位，避免混用 |
掌握这四种单位的区别与换算，不仅能轻松应对面试，更能让你在 uni-app 项目中写出适配性更强的样式代码。记住一句话：rpx 是 uni-app 适配的基石，px 是精确控制的补充，vw/vh 是全屏布局的利器。
未经允许不得转载：任鹏个人博客 » uniapp 面试题：uni-app 中 rpx、px、vw、vh 的区别与换算规则
