RPX/PX 转换：微信小程序适配不同屏幕

做微信小程序时，设计稿用的是 750px 宽，但写过 rpx(100) 和 px(100) 的人都知道——这两个单位出来的效果不一样。不了解 RPX 和 PX 的区别，适配不同手机会出问题。

速工具的 RPX/PX 转换工具支持 RPX ↔ PX 互转，还能按设备 DP 算实际显示尺寸。

RPX 是什么

RPX（Responsive Pixel）是微信小程序自己的响应式单位，设计初衷是让 UI 在不同宽度的屏幕上自动缩放。

规则：750rpx = 屏幕宽度。也就是说，在 375pt 的 iPhone（逻辑像素）上，750rpx 刚好占满屏幕宽；在 414pt 的 iPhone 上，750rpx 也占满——系统会自动缩放。

PX 就是逻辑像素（PT/DP），不做自动缩放。写 100px，在 2x 屏（@2x）上实际渲染 200 物理像素，在 3x 屏上渲染 300 物理像素。

单位	是否响应式	基准	典型场景
rpx	✅ 是	750rpx = 屏宽	整体布局、间距
px	❌ 否	1px = 1 逻辑像素	边框、固定尺寸元素

rpx = px * (750 / 设计稿基准屏宽)
px = rpx * (屏幕宽度 / 750)

如果你的设计稿是按 750px 宽的（iPhone 6/7/8 标准），直接写 rpx 就行，不用算。如果是 375px 稿，1px = 2rpx。

⚠️ iPad 上小程序跑在「手机模式」（固定宽度），750rpx 不会真的扩展到 768px。

不是。H5 的 px 是 CSS 像素（受 viewport 缩放影响）；小程序的 px 是固定逻辑像素，不做缩放。小程序里要做响应式，用 rpx 而不是 px。

图片宽度用 rpx（让它随屏宽缩放），高度用 auto 或按比例设 rpx。固定尺寸的图标（比如 44×44 的按钮）用 px 更合适，避免在不同屏上太大或太小。