1. 小程序橫屏

在目標(biāo)頁面json文件里設(shè)置"pageOrientation": "landscape"即可實(shí)現(xiàn)全屏，這個(gè)參數(shù)默認(rèn)是"portrait"（豎屏），設(shè)置"auto"表示跟隨手機(jī)系統(tǒng)自動(dòng)轉(zhuǎn)換。

需要注意的是，設(shè)為橫屏后，rpx單位不再生效，有人建議使用px，但是這樣不能實(shí)現(xiàn)自適應(yīng)布局，所以我們需要引入一個(gè)新的單位：vmin。

2. 尺寸單位vmin

vmin：視口寬度vw和高度vh兩者之間的最小值。

其實(shí)，有vmin自然就會(huì)有vmax，vmax意為視口寬度vw和高度vh兩者之間的最大值。

vw我們都理解，是當(dāng)前設(shè)備寬度的1%，即1vw就是設(shè)備寬度的1%，50vw就是設(shè)備寬度的50%（vh同理）

vmin怎么理解呢？拆一下，看成v + min，前面的v還是vw中的v，min則是w和h中的最小值，這樣一來，vmin就能理解為當(dāng)前設(shè)備最短邊的1% （vmax則是最長邊的1%），是不是立馬就懂啦？50vmin就是最短邊的一半，100vmin就是最短邊的全部。

什么時(shí)候會(huì)用到這兩個(gè)單位呢？

image

案例1：一個(gè)總能展示在屏幕的正方形（如上圖左邊黃色區(qū)域）可以這樣定義：

// 表示寬高都取當(dāng)前設(shè)備最短邊（無論設(shè)為橫屏還是豎屏，最短邊都是手機(jī)的寬）的100%倍
.box {
  width: 100vmin;
  height: 100vmin;
}

案例2：一個(gè)以屏幕最長邊為邊長的正方形（如上圖右邊黃色區(qū)域）可以這樣定義：

// 表示寬高都取當(dāng)前設(shè)備最長邊（無論設(shè)為橫屏還是豎屏，最長邊都是手機(jī)的高）的100%倍
.box {
  width: 100vmax;
  height: 100vmax;
}

所以，我們在小程序中使用vmin作為長度單位就能保證所有元素都能正常展示，也可以適應(yīng)各種尺寸的屏幕了。

但是這樣一來，寫CSS的時(shí)候不就很麻煩？我們想實(shí)現(xiàn)一個(gè)豎屏狀態(tài)下是200rpx * 50rpx的按鈕，在橫屏狀態(tài)下使用vmin做單位的話，寬高各是多少呢？這涉及rpx和vmin的單位換算，所以我們需要定義一個(gè)轉(zhuǎn)換函數(shù)幫助我們處理這些轉(zhuǎn)換邏輯。

這篇文章介紹了如何在微信小程序中使用SCSS，這里我們使用SCSS定義該函數(shù)，：

// rpx 轉(zhuǎn) vmin
@function vmin($rpx) {
  @return #{$rpx * 100 / 750}vmin;
}

于是，橫屏頁面下，我們可以這樣定義一個(gè)按鈕使之做到自適應(yīng)：

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

最終渲染出來的結(jié)果是：

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

你學(xué)廢了嗎？

微信搜索「熊貓活動(dòng)助理」進(jìn)入體驗(yàn)。

小程序中的抽獎(jiǎng)界面使用了橫屏模式，可以進(jìn)入小程序體驗(yàn)一下，具體操作可參考《如何制作一個(gè)抽獎(jiǎng)點(diǎn)名工具》。

image