在目標頁面 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文件,可以為微信小程序頁面添加豐富的樣式效果,提升用戶體驗。開發者在編寫樣式時,應該注重代碼的規范性和可維護性,以便後續的維護和優化。