微信小程序填坑之路（三）：布局适配方案（rpx、px、vw、vh）

因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。

rpx适配

rpx是小程序中的尺寸单位，它有以下特征：

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

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

vw、vh适配

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

• 小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
• 小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh

所以，我们在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就已经足够使用了,所以它们的出场机会很少。

转:  https://www.jianshu.com/p/fc08527604a1