在目標頁面 json 文件里設置 "pageOrientation": "landscape" 即可實現全屏，這個參數默認是 "portrait" （豎屏），設置 "auto" 表示跟隨手機系統自動轉換。
需要注意的是，設為橫屏後， rpx 單位不再生效，有人建議使用 px ，但是這樣不能實現自適應布局，所以我們需要引入一個新的單位： 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：一個總能展示在屏幕的正方形（如上圖左邊黃色區域）可以這樣定義：
案例2：一個以屏幕最長邊為邊長的正方形（如上圖右邊黃色區域）可以這樣定義：
所以，我們在小程序中使用 vmin 作為長度單位就能保證所有元素都能正常展示，也可以適應各種尺寸的屏幕了。
但是這樣一來，寫CSS的時候不就很麻煩？我們想實現一個豎屏狀態下是200rpx * 50rpx的按鈕，在橫屏狀態下使用 vmin 做單位的話，寬高各是多少呢？這涉及 rpx 和 vmin 的單位換算，所以我們需要定義一個轉換函數幫助我們處理這些轉換邏輯。
這篇文章 介紹了如何在微信小程序中使用SCSS，這里我們使用SCSS定義該函數，：
於是，橫屏頁面下，我們可以這樣定義一個按鈕使之做到自適應：
最終渲染出來的結果是：
你學廢了嗎？
微信搜索「 熊貓活動助理 」進入體驗。
小程序中的抽獎界面使用了橫屏模式，可以進入小程序體驗一下，具體操作可參考 《如何製作一個抽獎點名工具》 。
⑵ 微信小程序 頁面怎麼引入css文件
微信小程序的頁面結構主要由四個部分組成：js（頁面邏輯）、wxml（頁面結構）、wxss（頁面樣式表）和json（頁面配置）。每個頁面的樣式主要存放在同名的.wxss文件中，這樣可以方便地管理和維護樣式。
在開發微信小程序時，開發者可以通過將樣式代碼寫入對應的.wxss文件中，來為頁面添加樣式。例如，如果有一個頁面的文件名為「index」，那麼對應的樣式文件名也應該為「index.wxss」。這樣，小程序在運行時會自動載入對應的樣式文件，從而實現頁面的樣式展示。
需要注意的是，wxss文件中的樣式規則與CSS類似，但也有一定的差異。例如，類選擇器和標簽選擇器的寫法有所不同。在使用wxss文件時，可以通過類名或標簽名來引用樣式規則。此外，還可以使用特殊的選擇器，如：::before和::after，來插入偽元素。
在編寫樣式時，可以利用一些CSS選擇器來實現復雜樣式效果。例如，可以使用偽類選擇器來實現不同狀態下的樣式變化，或者使用嵌套選擇器來實現復合樣式。另外，還可以使用變數來實現樣式復用，提高代碼的可維護性。
微信小程序提供了豐富的樣式特性，開發者可以根據實際需求來選擇合適的方式來編寫樣式代碼。通過合理地運用這些特性，可以為小程序頁面創建出美觀、實用的樣式效果。
在編寫樣式時，還可以利用一些CSS3特性，如：漸變、陰影、過渡等，來實現更豐富的視覺效果。此外，還可以使用一些預處理器，如：Sass、Less等，來提高代碼的可讀性和可維護性。
總之，通過正確地使用wxss文件，可以為微信小程序頁面添加豐富的樣式效果，提升用戶體驗。開發者在編寫樣式時，應該注重代碼的規范性和可維護性，以便後續的維護和優化。