微信小程序适配方案

一. 概述

习惯了写pc端项目，会经常考虑到适配的问题，写响应式布局。拿到微信小程序的设计图时候，有点懵，不知道px和rpx是如何规则转换的，写的很慢，感觉没有找到法门，不顺手。又仔细阅读了文档规则，大彻大悟，很简单。

二. 名词

• 物理分辨率 = 设备像素 = 物理像素

• 逻辑分辨率 = 逻辑像素 = css像素 = 独立像素 ，肉眼感知尺寸

• 设备像素比 = 物理分辨率 / 逻辑分辨率

iPhone6为例：逻辑像素：375，物理像素：750，设备像素比：2

三. 小程序适配方案

小程序的适配原理，提出了一种新单位rpx，为ui和开发们省去了很大的功夫。rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

一般情况设计稿是按照iphone6尺寸设计的，设计稿上尺寸大小可以直接等于rpx
设计稿：(175.3px，91.8px)，小程序：(175.3rpx，91.8rpx)。