E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

微信小程序该如何适配各个机型屏幕我们知道在原始设备中, 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这个单位会帮我们自动处理适配问题, 毕竟他叫做动态像素不是么.

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » [微信小程序]适配各个不同机型屏幕
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏