微信小程序该如何适配各个机型屏幕
我们知道在原始设备中, iOS有pt,安卓有dp(密度无关像素), 但是无论在原生开发语言还是在React-native中,
我们处理屏幕适配, 都可以采用动态获取当前屏幕的方式计算比例, 动态设置真实的margin间距值,
以当前流行的iPhone 6 屏幕来说, 设计一般会基于这个屏幕尺寸来给出设计稿 (375*667)当在不同的设备上时,(5s/6sp/7/x等), 我们通过获取当前设备的真实屏幕pt (RealScreenW/RealScreenH)RealScreenW/375 = presentWRealScreenH/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这个单位会帮我们自动处理适配问题, 毕竟他叫做动态像素不是么.
