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

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

我们知道在原始设备中, 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这个单位会帮我们自动处理适配问题, 毕竟他叫做动态像素不是么.

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

微信小程序设置高度占满屏幕
因为有个页面需要改变背景颜色,所以要高度占满. 微信小程序设置高度占满屏幕: /*设置根节点,高度占满整个屏幕 */ page{height: 100%; } /*然后设置子节点高度100%*/ .c ...
微信小程序适配iPhoneX底部小黑条
微信小程序适配 iPhone X 底部小黑条一.在 app.js 中获取到设备信息 getSystemInfo 获取设备信息,然后将底部距离保存到 globalData 中方便页面读取当然如果项目 ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序怎么添加到主屏幕将微信小程序放到手机桌面？
微信小程序在一些场景下使用还是非常方便,如果遇到需要经常使用的微信小程序,将该微信小程序添加到手机桌面上,下次直接点击打开将更方便. 例如:草柴微信小程序很多人每天都在用免费领取美团外卖红包优惠券.饿 ...
微信小程序本地图片处理--按屏幕尺寸插入图片
个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧.微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的 ...
微信小程序适配iPhone X
1.获取设备型号 App({// 全局数据globalData: {// 其他数据定义 ...isIPX: false, // 当前设备是否为 iPhone X},// 小程序启动入口onLaunch ...
微信小程序根据wx.getSystemInfo获取屏幕尺寸，并动态改变元素宽高尺寸，示例
通过js获取屏幕尺寸,并改变元素尺寸效果图 index.wxml <view class="body-view" style="width:{{wWidth}}r ...
微信小程序 ---- iPhone X 以上机型留出底部安全距离
一.内容详讲在微信小程序设计按钮固定底部时,如果在编辑器使用的模拟器是iPhone X以下的机型时没有什么问题. 但是如果iPhone X以上的机型,会发现底部有黑条,会挡住按钮,而且操作不便. 所 ...
微信小程序适配iphoneX，XR，12等机型的底部安全区域
问题如下: 适配之前iPhone5界面如下: iPhone12界面如下: 为了适配所有的手机机型,需要获取到底部小黑条的高度,给固定在底部的view设置padding-bottom,增加高度:(有些手 ...