一. 概述
习惯了写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)。