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。