在开发过程中经常出现按设计搞上的尺寸写 最终在不同手机上显示不一样。经常被UI 怼

后来才知道 rpx 这种牛逼的单位，但是看官网写的换算方法有点懵

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

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

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

换言之，页面元素宽度在uni-app中的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度

。。。。。

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

用图来介绍 这个设计稿的 宽度是 375px

用图来介绍 这个设计稿的 宽度是 375px

这个组件宽度 330px所以在 uni-app 中 应该是 750 * 330 / 375 = 660rpx

这个组件宽度 330px

所以在 uni-app 中 应该是750 * 330 / 375 = 660rpx

版权声明：本文为CSDN博主「炫爱小七」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/qq_20258573/java/article/details/105506185