#Uniapp：upx 和 rpx使用区分 & 设计稿计算规则

upx 和 rpx 区别

1. upx： upx是uni-app中的长度单位，它代表设备独立像素（与屏幕密度无关），1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上，upx会自动转换为适应当前屏幕的最佳物理像素值，帮助开发者实现跨设备的一致性布局。
2. rpx： rpx是微信小程序中使用的长度单位，全称为responsive pixel（响应式像素）。同样地，1rpx也代表设备独立像素，在不同分辨率的手机屏幕上能够根据屏幕宽度进行自适应调整。它的设计目的是让开发者可以基于屏幕宽度进行适配，以达到更好的响应式效果。

总结来说，upx和rpx都是为了简化多设备、多屏幕尺寸下的开发工作而提出的相对单位，它们都致力于提供一种跨设备兼容的、与屏幕物理像素无关的布局方式。在uni-app中，你可以使用upx来替代rpx，二者的作用相似。

设计稿计算规则

https://blog.csdn.net/qq_42778001/article/details/103744024

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

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

所以，在实际开发中，1 rpx = 750 * （ 设计稿宽度 / 设计稿基准宽度 ）

设计稿的基准宽度为 750px, 有一个红色方块宽度为100px，换算成rpx 结果为：100rpx ，也就是说 1rpx = 1px

750 * 100 / 750

1. 若设计稿宽度为 750px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 750，结果为：100rpx。
2. 若设计稿宽度为 640px，元素 A 在设计稿上的宽度为 100px，那么元素 A 在 uni-app 里面的宽度应该设为：750 * 100 / 640，结果为：117rpx。
3. 若设计稿宽度为 375px，元素 B 在设计稿上的宽度为 200px，那么元素 B 在 uni-app 里面的宽度应该设为：750 * 200 / 375，结果为：400rpx。