小程序横屏兼容处理

271

背景

在h5开发中可用的css适配单位有 em/百分比/rem/vw/vh/vmin/vmax,小程序提供了 rpx: 可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。

日常小程序开发中,一般设计图尺寸为 750 * 1334 px,则在小程序中一般 1px 直接写为 1rpx ,当小程序为竖屏("pageOrientation": "portrait" 默认为竖屏)时,根据 rpx 可以直接还原UI图,但是当小程序为横屏("pageOrientation": "landscape")时,根据 rpx 适配就明显比较大,不符合UI图,因为 rpx 是根据屏幕宽度适配的。

这个时候就需要一种既能适配不同屏幕大小,又能以设计图为准,快速布局的方式。通过了解 em/百分比/rem/vw/vh/vmin/vmax 这几种方式,明显 vmin 更符合,vmin 是vw和vh中比较  的值。

vw: Viewport宽度, 1vw 等于viewport宽度的 1%。 vh: Viewport高度, 1vh 等于viewport高的的 1%。

所以 100 vmin = 750px。

.wxss 文件处理

当设置某个元素的宽度为 100px 时,根据 100px / 750px = x / 100vmin ,则对应的 vmin 值为 100vmin / 7.5 ,当单位为 rpx 时, vmin 值为 100vmin / 7.5 ,即

100px = 100vmin / 7.5 或者 100rpx = 100vmin / 7.5 ,但是每次都写 vmin / 7.5 又有点麻烦,所以就写了个小工具 rpx2vmin ,支持将 rpx/px 转译为 vmin,这样布局的时候依然写 rpx/px ,最后再转译一下就可以了。

将需要转译的 .wxss 文件复制粘贴到 input 文件下,在项目目录下执行如下命令行 ,会在 ouput 目录下生成对应的文件名称,需要提前安装 nodejs

# 安装依赖
npm install

# 将 rpx 转译为 vmin
npm run rpx2vmin

# 将 px 转译为 vmin
npm run px2vmin

主要处理的如下:

font-size: 12rpx;
height: 60rpx;
padding: 12rpx 16rpx;
border-left: 2rpx dashed #5DA5FF;

width: calc(100vw - 50rpx - 80rpx);

转移为

font-size: calc(12vmin / 7.5);
height: calc(60vmin / 7.5);
padding: calc(12vmin / 7.5) calc(16vmin / 7.5);
border-left: calc(2vmin / 7.5) dashed #5DA5FF;

width: calc(100vw - 50vmin / 7.5 - 80vmin / 7.5);

或者是:

font-size: 12px;
height: 60px;
padding: 12px 16px;
border-left: 2px dashed #5DA5FF;

width: calc(100vw - 50px - 80px);

转移为

font-size: calc(12vmin / 7.5);
height: calc(60vmin / 7.5);
padding: calc(12vmin / 7.5) calc(16vmin / 7.5);
border-left: calc(2vmin / 7.5) dashed #5DA5FF;

width: calc(100vw - 50vmin / 7.5 - 80vmin / 7.5);

js 中的处理

某些时候我们可能需要通过 js 计算设置,这个时候可以通过 wx.getSystemInfo() 得到 windowWidth(可使用窗口宽度,单位px) 和 windowHeight(可使用窗口高度,单位px) , 100vmin = Math.min(windowWidth, windowHeight)1px = Math.min(windowWidth, windowHeight) / 750 ,其中750为布局的时候可视窗口的最小宽度,其他尺寸乘以比例即可得到对应的 px 值或者 rpx 值。