px物理像素
px（pixel） 是 CSS 中的绝对长度单位。- 在 PC 网页中，1px ≈ 1 个屏幕物理像素（但受设备像素比 DPR 影响）。
- 在 移动端，情况更复杂：
| 设备 | 屏幕宽度（物理像素） | CSS 逻辑宽度（viewport） | 1 CSS px = ? 物理像素 |
|---|---|---|---|
| iPhone 13 | 1170 × 2532 | 390 × 844 | 3（DPR=3） |
| 某安卓机 | 1080 × 2340 | 360 × 780 | 3（DPR=3） |
移动端浏览器会将高分辨率屏幕“缩放”成一个较小的逻辑尺寸（如 375px 宽），这个逻辑尺寸就是 CSS 像素。
所以：px 是 CSS 逻辑像素，不是物理像素，但它在不同设备上实际显示大小不一致。
rpx响应式像素
rpx(responsive pixel): uni-app / 微信小程序的“响应式像素”
rpx 是一种与屏幕宽度相关的动态单位。 规定：屏幕宽度 = 750 rpx
这是 微信小程序最早提出，后被 uni-app 全面采用 的单位。
换算公式：1 rpx = (当前设备屏幕宽度 / 750) px
| 设备 | 屏幕 CSS 宽度 | 1 rpx = ? px | 750 rpx = ? px |
|---|---|---|---|
| iPhone 13 | 390 px | 390 / 750 = 0.52 px | 750 × 0.52 = 390 px ✅ |
| 安卓全面屏 | 360 px | 360 / 750 = 0.48 px | 750 × 0.48 = 360 px ✅ |
| iPad（横屏） | 1024 px | 1024 / 750 ≈ 1.365 px | 750 × 1.365 ≈ 1024 px ✅ |
无论什么设备，750 rpx 总是等于屏幕宽度！
rpx解决什么问题？
问题：设计师给了一张 750px 宽的 UI 图，如何在 iPhone 和安卓机上完美还原？
❌ 用 px 的问题：
- 设计稿按钮宽 200px
- 在 iPhone（390px 宽）上写
width: 200px→ 占屏 51% - 在 安卓（360px 宽）上同样
200px→ 占屏 55% → 布局错乱！
✅ 用 rpx 的方案：
- 设计稿 750px 宽 → 按比例：200px = (200 / 750) × 750 rpx = 200 rpx
- 在任何设备上：
- iPhone：200 rpx = 200 × (390/750) ≈ 104 px
- 安卓：200 rpx = 200 × (360/750) = 96 px
- 占屏比例始终 = 200 / 750 ≈ 26.7% → 完美还原设计！
