PX转RPX工具

一、基本概念定义

1. PX（Pixel，像素）：是屏幕显示的最小物理单位，也是前端开发中最基础的尺寸单位。 PX是固定尺寸单位，1px在不同设备上的物理大小可能不同（比如同样100px，在手机上看起来大，在电脑上看起来小）， 因为不同设备的屏幕像素密度（PPI）不同。

2. RPX（Responsive Pixel，响应式像素）：是微信小程序推出的自适应尺寸单位， 专为移动端跨设备适配设计。核心设计理念是「把所有设备的屏幕宽度都统一为750rpx」， 让开发者无需关心设备具体尺寸，只需按750rpx宽度设计即可。

二、为什么不同设备显示效果不同？

这是RPX的核心特性，也是新手最容易困惑的点，底层原因有3个：

1. 核心规则：RPX的换算公式是 1rpx = 设备实际屏幕宽度(px) ÷ 750。 不同设备的物理屏幕宽度不同，导致1rpx对应的实际PX值不同。
2. 设备差异：
   • iPhone 6/7/8：屏幕宽度375px → 1rpx = 375 ÷ 750 = 0.5px
   • iPhone 6/7/8 Plus：屏幕宽度414px → 1rpx = 414 ÷ 750 = 0.552px
   • 安卓通用设备：屏幕宽度360px → 1rpx = 360 ÷ 750 = 0.48px
   • iPad：屏幕宽度768px → 1rpx = 768 ÷ 750 = 1.024px
3. 设计稿与实际显示的区别： 设计稿统一按750rpx宽度制作（1px=2rpx），这只是「设计阶段的换算比例」； 实际运行时，小程序会根据设备屏幕宽度自动调整RPX对应的PX值， 最终实现「在所有设备上，元素占屏幕的比例一致」。

三、转换公式与使用场景

1. 设计稿换算（750rpx宽度）： PX转RPX = PX × 2；RPX转PX = RPX ÷ 2（仅用于设计稿还原，非实际显示值）

2. 实际设备换算： 1rpx = 设备屏幕宽度(px) ÷ 750；1px = 750 ÷ 设备屏幕宽度(px) rpx

3. 最佳使用场景：

• ✅ 推荐用RPX：文字大小、按钮尺寸、内边距、边框、小图标等需要固定比例的元素
• ❌ 不推荐用RPX：超大尺寸布局（如页面容器宽度）、需要固定物理大小的元素（如验证码输入框）
• 💡 混合使用：大布局用Flex/百分比 + 细节用RPX，兼顾适配性和精准度

四、实际开发示例

假设你在设计稿上设置按钮高度为44px（转换为88rpx）：

• 在iPhone 6上：88rpx × 0.5px/rpx = 44px（和设计稿一致）
• 在iPhone 6 Plus上：88rpx × 0.552px/rpx = 48.58px（物理尺寸稍大，但占屏幕比例一致）
• 在iPad上：88rpx × 1.024px/rpx = 90.11px（物理尺寸大，但占屏幕比例仍一致）

这就是RPX的价值：保证元素在所有设备上的视觉比例一致，而非物理大小一致。

适用场景：微信小程序开发、支付宝小程序、移动端H5适配、750宽度设计稿还原 | 注意：RPX主要用于小程序，H5中建议使用vw/vh单位