在制作微信小程序播放器时，遇到了一个坑（自己竟然毫无知觉的跳进去了），就是页面布局适配问题，说到这里我们就不得不说一说微信小程序的适配单位（rpx、px、vw、vh）它们之间的换算方式了。

rpx适配

rpx 单位是微信小程序中css的尺寸单位，rpx 可以根据屏幕宽度进行自适应。

根据微信小程序官方规定，屏幕宽为 750rpx，如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px。

设备 rpx 换算 px (屏幕宽度/750) ， px 换算rpx (750/屏幕宽度) 如下：

# 其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px
1rpx =（screenWidth / 750）px  

iPhone5 1rpx = 0.42px 1px = 2.34px 
iPhone6 1rpx = 0.5px 1px = 2rpx 
iPhone6s 1rpx = 0.552px 1px = 1.81rpx

由上可知，在不同设备上rpx与px的转换是不相同的，但是宽度的 rpx 却是固定的，所以可以使用rpx作为单位，来设置布局的宽高。

vw、vh适配

vw 和 vh 是 css3 中的新单位，是一种视窗单位，在小程序中也同样适用。

比如在小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw，同理，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh。

::: info 总结 我们在小程序中也可以使用 vw、vh 作为尺寸单位使用，但是一般情况下，使用百分比 或 rpx 就可以了。 :::