移动端适配——单位篇
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与rem
rem的值是px的倍数
默认情况下font-size = 16px,那么1rem = 16px
我们可以在并且只能在html标签（因为html节点是根节点，就是rem里面的r：root）里面修改font-size : 32px， 从而1rem = 32px
px与rem
em的值是px的倍数
默认情况下font-size = 16px,那么1em = 16px
我们可以在自己元素上面修改font-size : 32px， 从而1em = 32px
如果自己元素上面没有设置font-size, 我们也可以在父元素上面设置font-size，从而来影响自己元素（孩子元素）使用的em的值。
rem 与 em 的区别🤔
上面也正是rem 与 em的区别：
rem只能在html标签里面设置rem的依赖的值到底是多少
而em是可以在自己元素以及父级元素设置em依赖的值到底是多少
vh 与vw
vh 和 vw 就是根据窗口的宽高，分成100等份，100vh就表示满高，50vh就表示一半高。
vh 和 vw与百分比的区别
百分比是基于父元素的设置而言的，如果父元素为100px，那么子元素100%也就是100px。
而 vh 和 vw 始终是针对窗口的宽高。
