UI视觉稿小程序适配

先说微信小程序的 rpx 换算方式：rpx = px * (目标设备宽 px 值 / 750)。举个例子：

• 目标设备的宽度如果是 375px，按照 750rpx 进行换算，则等于 1rpx = 0.5px
• 目标设备的宽度如果是 750px，换算后 1rpx = 1px
• 目标设备的宽度如果是 1125px，换算后 1rpx = 1.5px

在 iPhone 6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。开发微信小程序时设计师可以用 iPhone 6 作为视觉稿的标准。也就是说，设计师在设计小程序时，可以这样做：

• 直接以 iPhone 6 的屏幕尺寸（375×667）用作视觉稿尺寸，1 px = 2 rpx；
• 以 1 px = 1 rpx的标准，将设计稿尺寸设定为 750×1334。

其实做小程序的前端开发，最简便、最实在的途径应该是以屏幕尺寸（375×667）用作视觉稿尺寸，UI设计师设计布局，直接使用rpx值即可很好的自适应了~

新建图层尺寸为375px×667px,所有尺寸按照px为计量单位。填写单位换算标准：1 px = 2 rpx。控件尺寸按照WeUI 前端样式库中的标准来。

开发过程中的适配问题：