Uni-app rpx布局终极指南

🚀 今日份：rpx 响应式布局的"生存法则"

在 Uni-app 中，我们最常听到的口诀是："设计稿是 750px，代码就写多少 rpx"。但你真的知道它背后发生了什么吗？

💡 核心逻辑：750 视口系统

rpx（responsive pixel）是微信小程序率先引入、Uni-app 完美继承的单位。它的核心逻辑非常简单粗暴：

无论屏幕多宽，统一划分为 750 份。

因此，1rpx 永远等于屏幕宽度的 。

🛠️ 为什么会有 rpx vs px 的纠结？

单位	特点	适用场景
rpx	随屏幕宽度等比例缩放。	页面整体布局、图片宽高、大多数间距。
px	物理像素，不随屏幕缩放。	极小的边框（1px）、固定的字体大小（防止超大屏下字太大）。

---

📝 实战示例：动态计算与坑点处理

1. CSS 中的基本用法

假设设计稿（750px 宽）中有一个盒子宽 375px（即屏幕一半）：

.box {
    width: 375rpx; /* 在任何手机上都会占据正好一半的宽度 */
    height: 100px;  /* 如果用 px，在 iPhone 15 和 iPad 上高度看起来是一样的，容易变形 */
}

2. JavaScript 中的单位转换

有时候我们需要在 JS 里动态计算样式（比如高度），这时不能直接写数字，需要转换：

// 将 200rpx 转换为当前设备对应的 px
let pxValue = uni.upx2px(200); 

console.log(`当前设备下 200rpx 等于 ${pxValue}px`);

---

⚠️ 进阶避坑：在大屏（iPad/PC）上失控怎么办？

这是很多开发者会忽略的：rpx 是基于宽度的。 如果你在宽度很大的 iPad 或 PC 浏览器上打开一个全用 rpx 写的页面，你会发现所有的图标、文字都变得巨大无比。

**解决方案：配置 rpxCalcMaxDeviceWidth**

在 manifest.json 中，你可以限制 rpx 的最大计算宽度：

/* manifest.json */
{
    "h5": {
        "optimization": {
            "responsive": true
        },
        "rpxCalcMaxDeviceWidth": 960, // 当屏幕超过 960px 时，rpx 不再继续变大
        "rpxCalcBaseDeviceWidth": 375,
        "rpxCalcIncludeWidth": 750
    }
}

---

💡 核心总结

1. 标准设计稿 ：请务必让设计师按 750px 出图，这样你写代码时不需要动脑子计算，数值直接 1:1 填入即可。
2. 字体慎用 rpx ：如果你不希望用户在超大屏手机上看到"巨型字体"，建议字体使用 px。
3. 混合使用 ：大布局用 rpx 保证比例，细节微调用 px 保持精致。

---