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