px upx 和rpx

前言

随着web前端技术的飞速发展,出现了越来越多的元素单位供大家选择和使用,如%、vw、vh、px、em、rem等等,笔者认为rem已经是前端使用的频率较高的自适应单位了,然而近几年又流行了rpx和upx单位。本文简单介绍px与rpx,px与upx之间的转换。

px与rpx

rpx单位是微信小程序中css的尺寸单位,rpx会根据屏幕分辨率调整元素尺寸,可以根据屏幕宽度进行自适应。
微信小程序规定屏幕的基准宽度为750rpx。
假设设计稿尺寸为640px,我们需要构建一个宽为100px的div,则我们可以设置其width = 750rpx * 100 / 640 = 117.1875rpx。
显然,当我们把设计稿尺寸设置为750px时,很容易进行px与rpx的换算,即1rpx = 1px 。要得到100px的宽度,可以直接写width:100rpx。

px与upx

uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
开发者可以通过设计稿基准宽度计算页面元素 upx 值,设计稿 1px 与框架样式 1upx 转换公式如下:
设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

举例说明:
若设计稿宽度为 640px,元素 A 在设计稿上的宽度为 100px,那么元素 A 在 uni-app 里面的宽度应该设为:750 * 100 / 640,结果为:117upx。
若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400upx。
综上,很显然当我们把设计稿尺寸设计为750px时,1px = 1upx。

rpx与upx

根据上述的换算,不难发现,rpx和upx貌似没有什么差异。
upx在2018年就推出了,其初衷是为了让微信的rpx机制可以跨全端使用。

在普通css写法里,upx会被编译器编译。但动态绑定时,upx无法被准确编译,此时官方(此处及下文中提及的官方均指代uniapp官方)提出了使用uni.upx2px()方法,用来动态计算。

后来其他几家小程序平台陆续都兼容了rpx机制,rpx不再是微信的专用单位,而成为了这个行业的通用单位。

最近官方收到很多开发小程序的用户投诉upx不能像rpx那样直接支持动态绑定,还得再使用uni.upx2px方法。

官方反思了策略,既然微信不可能支持upx的动态绑定,不如我们在App端和H5端来支持rpx的动态绑定。这样rpx就可以全端通用,且支持动态绑定,不再需要uni.upx2px方法。

从HBuilderX 2.0.5起,已经支持rpx的正常着色和px2rpx的ide代码提示转换功能。

官方也修改了uni-app文档中关于尺寸单位的介绍,不再推荐upx的使用,而推荐rpx。
这个策略调整,不影响开发者的已有代码正常运行。

开发者仍然可以使用upx和uni.upx2px,也可以改用rpx,都可以。没有必要批量调整老代码。但新开发还是应该使用rpx。

你可能感兴趣的:(px upx 和rpx)