建站
咨詢
售后
建站咨詢
新聞中心
大屏適配指南
目前市面上的用戶設(shè)備大致可分為小屏的手機端、中屏的平板、大屏的 PC 端三類，而在這三類設(shè)備中又會有細(xì)小的尺寸差別，也稱作屏幕碎片化。
站在用戶的角度思考問題，與客戶深入溝通，找到灤平網(wǎng)站設(shè)計與灤平網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、域名注冊、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋灤平地區(qū)。
隨著小程序能夠在越來越多的設(shè)備終端上運行，開發(fā)者也應(yīng)該針對不同的屏幕尺寸進(jìn)行相應(yīng)的適配。
按照一般的適配原則，結(jié)合小程序特點，通常在以下三種情況中需要進(jìn)行適配：
1. 同一類設(shè)備下，尺寸有細(xì)微差別
使用小程序提供的 rpx 單位，在尺寸差別不大的情況下對頁面布局進(jìn)行等比縮放。
2. 在允許屏幕旋轉(zhuǎn)的情況下，可分為橫屏與豎屏
手機端設(shè)置 "pageOrientation": "auto" 或 iPad 上設(shè)置 "resizable": true 時會允許屏幕旋轉(zhuǎn)，此時使用 Page 的 onResize 事件或者 wx.onWindowResize 方法可對該操作進(jìn)行監(jiān)聽，進(jìn)而判斷是使用橫屏還是豎屏布局。
3. 不同類設(shè)備或者能夠自由拖拽窗口的 PC 小程序
小程序目前是基于 Webview 實現(xiàn)，利用CSS 媒體查詢可實時監(jiān)聽屏幕尺寸大小，在不同的屏幕下展現(xiàn)不同的 UI 布局，結(jié)合Flex 彈性布局、Grid 網(wǎng)格布局便能實現(xiàn)更加響應(yīng)式的適配方案。
matchMedia - 抽象式媒體查詢
小程序基礎(chǔ)庫基于 window.matchMedia API 新增了一組過程式與定義式接口 match-media 。開發(fā)者可以通過
- 開發(fā)者能夠更方便、顯式地使用 Media Query 能力，而不是耦合在 CSS 文件中，難以復(fù)用。
- 能夠在 WXML 中結(jié)合數(shù)據(jù)綁定動態(tài)地使用，不僅能做到組件的顯示或隱藏，在過程式 API 中可塑性更高，例如能夠根據(jù)尺寸變化動態(tài)地添加 class 類名，改變樣式。
- 能夠嵌套式地使用 Media Query 組件，即能夠滿足局部組件布局樣式的改變。
- 組件化之后，封裝性更強，能夠隔離樣式、模版以及綁定在模版上的交互事件，還能夠提供更高的可復(fù)用性。
- 瀏覽器內(nèi)置 API ，能夠在所有基于 Webview 的小程序上使用，兼容性良好。 match-media 具體使用方法可參考相關(guān) API 文檔。
4. 自適應(yīng)布局
為了讓開發(fā)者更好的自適應(yīng)大屏，小程序提供了 row/col 組件 供開發(fā)者使用。
自適應(yīng)的主要特性是：
- 整行最多只有 24 份，對于的排列會自動向下?lián)Q行
- 每個尺寸設(shè)置并不會影響到其它尺寸的布局
設(shè)計指引與代碼示例
關(guān)于如何在設(shè)計、用戶體驗上實現(xiàn)更好的多端適配小程序。
同時我們也提供了多端適配示例小程序 ，基于 row/col 組件 簡單實現(xiàn)了常見的適配場景，例如：
- 屏幕越大，布局不變，模塊左右伸縮
- 屏幕越大，內(nèi)容越多，模塊內(nèi)容換行排列
- 屏幕越大，布局改變，模塊內(nèi)容可折疊 / 展現(xiàn)
體驗路徑：“擴(kuò)展能力” -> “多端適配（需在PC端體驗）”
本文標(biāo)題：創(chuàng)新互聯(lián)小程序教程：微信小程序大屏適配指南
文章分享：http://m.fisionsoft.com.cn/article/dhjphgi.html
