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

upxrpx 区别

  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。

你可能感兴趣的:(#Uniapp,uni-app)