微信小程序rpx和px关系

微信小程序中使用了自定义的尺寸单位 rpx（responsive pixel），这是一种相对单位，用于适配不同屏幕尺寸的设备。rpx 的设计目的是为了让开发者能够更容易地写出跨屏幕尺寸的应用，而不需要为每个屏幕尺寸单独写一套样式。

rpx 和 px 的换算

在微信小程序中，屏幕基准宽度为 750rpx。也就是说，当屏幕宽度为 750rpx 时，1rpx 等于 1/750 屏幕宽度。实际的物理像素（px）与 rpx 的换算关系如下：

简化后：

例如，如果设备的屏幕宽度为 375px（如 iPhone 6/7/8 的宽度），则换算公式为：

这意味着在这样的设备上，1rpx 实际上等于 0.5px。

不同设备上的 rpx 对应关系

• iPhone 6/7/8：375px * 667px，1rpx = 0.5px
• iPhone X/XS/11 Pro：375px * 812px，1rpx = 0.5px
• iPhone 11/12/13：414px * 896px，1rpx ≈ 0.545px
• iPhone 11 Pro Max/12 Pro Max/13 Pro Max：414px * 896px，1rpx ≈ 0.545px
• Android 设备：根据不同的设备型号，rpx 与 px 的换算比例也会有所不同。

示例

假设你需要设置一个元素的宽度为 75rpx，在 iPhone 6/7/8 上：

而在 iPhone 11/12/13 上：

使用 rpx 的好处

使用 rpx 可以帮助开发者轻松地适配不同设备的屏幕尺寸，而无需手动计算具体的像素值。这使得样式代码更加简洁，易于维护，并且增强了应用的可扩展性。

在微信小程序中编写样式时，推荐使用 rpx 单位来代替 px，以便更好地支持多种设备。