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;
}
你學廢了嗎？
微信搜索「熊貓活動助理」進入體驗。
小程序中的抽獎界面使用了橫屏模式，可以進入小程序體驗一下，具體操作可參考《如何製作一個抽獎點名工具》。