小程序横屏兼容处理

背景

在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 值。