在 uniapp 开发过程中如果直接按照设计稿上的 px 单位写页面，最终在不同手机上显示是有差别的，我们用 rpx 即可解决。

什么是 rpx

• rpx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度 750rpx。

• 开发者可以通过设计稿基准宽度计算页面元素 rpx 值，设计稿 1px 与框架样式 1rpx 转换公式如下：

     设计稿中的1px / 设计稿主体宽度 = 框架样式中的1rpx / 750rpx
  

• 最终有以下宽度计算公式：

    750 * (元素在设计稿中的宽度 / 设计稿主体宽度)
  

重点 uni-app 规定屏幕基准宽度 750rpx。

实际例子

• 比如下图设计图，设计稿主体的宽度是 375px
• 里面的一个组件如下图，设计稿中的宽度是 330px

• 那么它在 uniapp 中的宽度应该是

     750 * (330/375) = 660 rpx
  

设计稿不是 750px 时切图的解决方法

• 实际拿到的设计稿可能并不是 750px 宽
• 所以可以在 ps 中打开图片后，选择“图像”→“图像大小”
• 在像素大小中，把宽度改为 750 保存即可
• 此时测量的值多少， rpx 就是多少

————————————————

参考链接：「炫爱小七」