微信小程序中rpx/px/vh/等单位问题

最近在学习小程序，对小程序中的单位有些疑惑，特来梳理一下。

1.px

• px 即像素点。但是，随着 Retina 屏幕（即「视网膜屏」）的推出和高分屏的普及，1 px 所能代表的实际长度并非是一成不变的。对于跨平台、跨设备的应用来说，单纯使用 px 并不能满足需要。因为，这很难保证小程序的元素，能在不同设备上正常显示——同样 px 尺寸的元素，在高分屏上显示会明显要比在低分屏显得更小。因此，我们需要一个动态的长度单位。这个单位通过对不同屏幕的分辨率进行调整和适配，保证相同元素在不同屏幕上的展示是正常的。

2. rpx

• 小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此。
• 1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px

3. dp

• dp 是以屏幕分辨率为基准的动态单位，而 rpx 是以长度为基准的动态单位。就像「米」和「平方厘米」不能互换一样，dp 和 rpx 两者也是不能直接进行互换的。dp 与 px 换算公式是：1dp = px * (目标设备 dpi 分辨率 / 160)。

4. rem

• 微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx

5.vh/vm

• vh viewpoint height，视窗高度,将屏幕高度等分100份，1vh等于视窗高度的1%。
• vm viewpoint width，视窗宽度，将屏幕宽度等分100份，1vw等于视窗宽度的1%。

参考：链接：https://www.jianshu.com/p/f379894ecbf4