[微信小程序]适配各个不同机型屏幕

微信小程序该如何适配各个机型屏幕

我们知道在原始设备中, iOS有pt,安卓有dp(密度无关像素), 但是无论在原生开发语言还是在React-native中,
我们处理屏幕适配, 都可以采用动态获取当前屏幕的方式计算比例, 动态设置真实的margin间距值,

以当前流行的iPhone 6 屏幕来说, 设计一般会基于这个屏幕尺寸来给出设计稿 (375*667)
当在不同的设备上时,(5s/6sp/7/x等), 我们通过获取当前设备的真实屏幕pt (RealScreenW/RealScreenH)
RealScreenW/375 = > presentW
RealScreenH/667 = >  presentH
我们获取了通用的比例值,

let w =  20 * presentW;
let h = 40 * presentH; 
以上,就获得了当前设备上应该设置margin / 宽高等数值.
或者调用通用函数的方式:

getW(w){
	return presentW * w
}

getH(h){
	return presentH * h
}

总之, 原生中可以采用以上方式来动态适配, 当然还有其他方法, 这只是其中一种,

但是到了小程序中, wxss不支持调用这种函数计算的方式,

好在问题解决的方法微信已经提供了,
首先, 微信推荐设计师们以 6 为基准屏幕来设计
其次微信提供了 rpx 这个动态像素的概念, 750rpx = 375px = 750 物理屏幕像素点 ,
还记得iPhone6的 实际物理屏幕像素点吗? 750 * 1334 (375pt * 667pt)

该怎么使用rpx?

我们以iOS原生开发举例 , 设计师给出的设计图基于 iPhone 6
有一个长条状按钮, 举例:
两边的margin外边距大概各20pt, 按钮在6的屏幕上,长度为 345pt

在小程序的 .wxss文件中,
我们只需要

.btn{
	width:690rpx;
}

690怎么来的?
当然是 345 * 2 , 因为 1rpx = 0.5 px (在 6屏幕上!在 6屏幕上!在 6屏幕上!在 6屏幕上!)

然后, 就可以放心了,
你可以切换小程序开发者工具的模拟器, 切换不同的设备, 你会发现, 无论什么设备, 都是等比例缩放的感觉,
适配就算是完成了的.
rpx这个单位会帮我们自动处理适配问题, 毕竟他叫做动态像素不是么.