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

这篇具有很好参考价值的文章主要介绍了#Uniapp：upx 和 rpx使用区分 & 设计稿计算规则。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

upx： upx是uni-app中的长度单位，它代表设备独立像素（与屏幕密度无关），1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上，upx会自动转换为适应当前屏幕的最佳物理像素值，帮助开发者实现跨设备的一致性布局。
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文章来源地址https://www.toymoban.com/news/detail-794185.html

750 * 100 / 750

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

到了这里，关于#Uniapp：upx 和 rpx使用区分 & 设计稿计算规则的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！