2022-01-25 什么是upx,upx和rpx的区别,upx的缺点,使用rpx代替upx

1.什么是upx

uni-app是用upx作为默认的尺寸单位,
它是相对于基准宽度的单位,可以根据屏幕宽度进行自适应

uniapp规定屏幕的基准宽度是750upx
若设计稿宽度为640px,某div宽度为100px,那么在uniapp中的宽度可以设置为750100/640=117upx
同理,在设计稿宽度为375px,宽度为200px的div,在uniapp中可以设置宽度为750200/375=400upx

公式:
div宽度(px):设计稿宽度=div宽度(upx)/750upx

2.upx的缺点:不支持动态绑定的:style

<!-- - 静态upx赋值生效 -->
<view class="test" style="width:200upx"></view>
<!-- - 动态绑定不生效 -->
<view class="test" :style="{width:winWidth + 'upx;'}"></view>

3.使用uni.upx2px()方法解决upx无法动态绑定的问题

//html:
<view  :style="{width: h_Width}">
//js:
  computed: {
      h_Width() {
		  //调用uniapp自带的uni.upx2px方法
          return uni.upx2px(750 / 2) + 'px';
      }
  }

4.upx和rpx的区别

从HBuilderX 2.0.5起，已经支持rpx的正常着色和px2rpx的ide代码提示转换功能。
官方也修改了uni-app文档中关于尺寸单位的介绍，不再推荐upx的使用，而推荐rpx。
这个策略调整，不影响开发者的已有代码正常运行。
官方推荐使用rpx替代upx

5.结论:用rpx,rpx已成为行业通用响应式宽度单位