关于前端:微信小程序横屏状态下的自适应实践尺寸单位vmin

1. 小程序横屏

在指标页面 json 文件里设置 "pageOrientation": "landscape" 即可实现全屏，这个参数默认是 "portrait"（竖屏），设置"auto" 示意追随手机零碎主动转换。

须要留神的是，设为横屏后，rpx单位不再失效，有人倡议应用px，然而这样不能实现自适应布局，所以咱们须要引入一个新的单位：vmin。

2. 尺寸单位 vmin

vmin：视口宽度 vw 和高度 vh 两者之间的最小值。

其实，有 vmin 天然就会有 vmax，vmax 意为视口宽度 vw 和高度 vh 两者之间的最大值。

vw咱们都了解，是以后设施宽度的 1%，即 1vw 就是设施宽度的 1%，50vw 就是设施宽度的 50%（vh同理）

vmin怎么了解呢？拆一下，看成 v + min，后面的v 还是 vw 中的 v，min 则是 w 和h中的最小值，这样一来，vmin 就能了解为以后设施最短边的 1%（vmax则是最长边的 1%），是不是立马就懂啦？50vmin 就是最短边的一半，100vmin 就是最短边的全副。

什么时候会用到这两个单位呢？

案例 1：一个总能展现在屏幕的正方形（如上图右边黄色区域）能够这样定义：

// 示意宽高都取以后设施最短边（无论设为横屏还是竖屏，最短边都是手机的宽）的 100% 倍
.box {
  width: 100vmin;
  height: 100vmin;
}

案例 2：一个以屏幕最长边为边长的正方形（如上图左边黄色区域）能够这样定义：

// 示意宽高都取以后设施最长边（无论设为横屏还是竖屏，最长边都是手机的高）的 100% 倍
.box {
  width: 100vmax;
  height: 100vmax;
}

所以，咱们在小程序中应用 vmin 作为长度单位就能保障所有元素都能失常展现，也能够适应各种尺寸的屏幕了。

然而这样一来，写 CSS 的时候不就很麻烦？咱们想实现一个竖屏状态下是 200rpx * 50rpx 的按钮，在横屏状态下应用 vmin 做单位的话，宽高各是多少呢？这波及 rpx 和vmin的单位换算，所以咱们须要定义一个转换函数帮忙咱们解决这些转换逻辑。

这篇文章介绍了如何在微信小程序中应用 SCSS，这里咱们应用 SCSS 定义该函数，：

// rpx 转 vmin
@function vmin($rpx) {@return #{$rpx * 100 / 750}vmin;
}

于是，横屏页面下，咱们能够这样定义一个按钮使之做到自适应：

.btn {width: vmin(200);
  height: vmin(50);
}

最终渲染进去的后果是：

.btn {
  width: 26.66667vmin;
  height: 6.66667vmin;
}

你学废了吗？

微信搜寻「熊猫流动助理」进入体验。

小程序中的抽奖界面应用了横屏模式，能够进入小程序体验一下，具体操作可参考《如何制作一个抽奖点名工具》。