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;
}你学废了吗？
微信搜寻「熊猫流动助理」进入体验。
小程序中的抽奖界面应用了横屏模式，能够进入小程序体验一下，具体操作可参考《如何制作一个抽奖点名工具》。