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