導航:首頁 > 編程語言 > 微信小程序css固定窗口

微信小程序css固定窗口

發布時間:2025-03-16 08:41:50

微信程序橫屏狀態下的自適應實踐(尺寸單位vmin)

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

閱讀全文

與微信小程序css固定窗口相關的資料

熱點內容
機械制圖和編程哪個難 瀏覽:123
手機怎麼看app的病毒 瀏覽:701
如何固定word里的圖片 瀏覽:426
看青春校園劇哪個app可以看超前預告 瀏覽:794
投標文件報價以哪個為准 瀏覽:183
蘋果手機icloud密碼忘了怎麼解鎖 瀏覽:68
pptv電視網路連接 瀏覽:452
北京網路信息安全公司 瀏覽:646
uci數據集怎麼用weka 瀏覽:208
win10e信缺少必要組件 瀏覽:995
水星訪客網路怎麼沒有網 瀏覽:156
怎麼取消迅雷7升級提示音 瀏覽:47
體驗套餐管理系統文件 瀏覽:46
查看快遞的有哪些app 瀏覽:372
pc版百度雲哪個版本好 瀏覽:575
javaj2ee教程 瀏覽:287
文件在微信顯示不是完整的 瀏覽:888
少兒編程常用語言有哪些 瀏覽:968
我的cad軟體打不開dwf格式文件 瀏覽:363
信息與數據的關系有哪些 瀏覽:501

友情鏈接