2016-12-10 資深UI設(shè)計(jì)者
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
以往拿到一份視覺(jué)稿要做頁(yè)面適配，通常都是針對(duì)不同分辨率尺寸做斷點(diǎn)寫 media query，然后看效果再微調(diào)。開(kāi)發(fā)過(guò)程中視覺(jué)稿要是做了修改，修改的地方就得再走一遍分辨率測(cè)試和微調(diào)，這時(shí)想屎的心都有了。而且這些適配都是建立在已 知的分辨率尺寸庫(kù)上，如果市面新出來(lái)一款分辨率尺寸機(jī)型，呵呵，又要奔跑在測(cè)試微調(diào)路上。是不是能有用一套代碼就適應(yīng)各種分辨率窗口，那么就不會(huì)再有上面 這些煩惱，且開(kāi)發(fā)效率快和維護(hù)成本會(huì)降低很多。
答案是有的，而且這種形式最早出現(xiàn)于 flash 全屏整站，前陣子拜讀了舉總介紹的一篇文章關(guān)于圖片適配屬性 Object-fit ，發(fā)現(xiàn)這個(gè)屬性 Object-fit 雖然只能應(yīng)用在圖片上，但是它的適配思路完全可以借鑒運(yùn)用在 H5 頁(yè)面適配上，這種思路即是「縮放」，也是本篇文章的核心內(nèi)容。就是無(wú)論窗口寬高比怎樣，頁(yè)面能自動(dòng)縮放到窗口大小，而且元素的坐標(biāo)及大小還可以使用和便于js計(jì)算的px為單位。
這里借用 Object-fit 的方法命名方便記憶，下面簡(jiǎn)單介紹 H5 頁(yè)面適配幾種展現(xiàn)形式。
1、contain 模式：以內(nèi)容中心為基點(diǎn)按照視覺(jué)稿的寬高比縮放以適配窗口顯示全頁(yè)面內(nèi)容，窗口與內(nèi)容的寬度比或高度比之間較小者縮放填滿窗口，當(dāng)窗口寬高比和視覺(jué)稿不同時(shí)，另一方向的兩側(cè)出現(xiàn)留空部分。
2、cover 模式：以內(nèi)容中心為基點(diǎn)按照窗口的寬高比等比縮放以適配窗口，窗口與內(nèi)容的寬度比或高度比之間較大者縮放填滿窗口，當(dāng)窗口寬高比和視覺(jué)稿不同時(shí)，另一方向的兩側(cè)超出窗口被裁剪，這種模式不會(huì)出現(xiàn)「contain 模式」的留空部分情況。
3、fill 模式：以內(nèi)容中心為基點(diǎn)頁(yè)面拉伸填充滿整個(gè)窗口以適配窗口，當(dāng)窗口寬高比和視覺(jué)稿不同時(shí)，內(nèi)容一定程度上被拉伸
4、scale-width 模式：頁(yè)面橫向縮放填充滿窗口，縱向按視覺(jué)稿的寬高比放大。出來(lái)的效果有兩種可能性，「contain 模式」或者「cover 模式」的效果。
5、scale-height 模式：頁(yè)面縱向縮放填充滿窗口，橫向按視覺(jué)稿的寬高比放大。出來(lái)的效果有兩種可能性，「contain 模式」或者「cover 模式」的效果。
下面分別來(lái)介紹我在項(xiàng)目中的對(duì)于適配的思考和選擇以及實(shí)現(xiàn)方法。
在做適配之前，首先要和設(shè)計(jì)師定義好頁(yè)面的寬高比，即設(shè)計(jì)稿的分辨率大小，因?yàn)榛顒?dòng)主要是通過(guò)微信進(jìn)行傳播推廣，所以這里我使用的是 iphone5/5s 機(jī)型微信瀏覽器窗口分辨率 640*1008。選擇這個(gè)分辨率主要出于以下 2 點(diǎn)綜合考慮:
拿最近做的項(xiàng)目舉例，該 H5 頁(yè)面基本可歸類為以下 4 種內(nèi)容類型：
1、填充滿窗口的層，比如背景幕布（圖1）。
圖1
這種層實(shí)現(xiàn)最簡(jiǎn)單，采用「fill 模式」適配形式。實(shí)現(xiàn)效果核心代碼如下：
圖1 中的圖片適配處理，采用「cover 模式」適配形式。實(shí)現(xiàn)效果核心代碼如下：
2、同時(shí)基于水平方向和垂直方向居中的層，比如頁(yè)面正文內(nèi)容部分（圖2）。
圖2
像這種層背景色是純色或透明，「contain 模式」是最佳選擇可在任何分辨率窗口顯示全頁(yè)面內(nèi)容，出現(xiàn)留空部分的顏色可以通過(guò)添加一個(gè)寬高 100% 的層設(shè)置背景屬性來(lái)修補(bǔ)。實(shí)現(xiàn)效果代碼如下：
3、填充滿整個(gè)窗口且邊緣不是純色的層，比如（圖3）。
圖3
「cover 模式」和「fill 模式」可以作為選擇。從易用性看，「fill 模式」可以適應(yīng)窗口區(qū)域，但從視覺(jué)體驗(yàn)上看，寬高不等比例的拉伸會(huì)造成圖片失真，同時(shí)該層的主要內(nèi)容及交互操作集中在中部，不重要的邊緣可以適當(dāng)被裁 剪，故這里選擇「cover 模式」來(lái)做適配會(huì)更好，實(shí)現(xiàn)效果代碼同上面示例基本一樣，區(qū)別在于縮放比處，代碼如下：
4、大于屏幕的層，可實(shí)現(xiàn)跟隨手勢(shì)移動(dòng)場(chǎng)景畫面，比如（圖4）。
圖4
「scale-width 模式」和「scale-height 模式」適合運(yùn)用在這類場(chǎng)景，（圖4）是橫向左右移動(dòng)層，故這里選用「scale-height 模式」適配形式。實(shí)現(xiàn)效果代碼如下：
這里寬高等比縮放使用方法除了 transform:scale(x,y)，也可以使用 zoom 進(jìn)行縮放，視實(shí)際場(chǎng)景需求選擇合適的方法，兩者主要不同是：
還有一些復(fù)雜的層，但無(wú)外乎都可以拆分成以上幾種類型層，將內(nèi)容分層出來(lái)，每個(gè)層根據(jù)內(nèi)容形式選用相應(yīng)的適配模式進(jìn)行縮放。
1、適配的核心思想是「縮放」。
2、每一種適配模式都不是絕對(duì)的，需要根據(jù)需求場(chǎng)景選用合適的形式。適配前先跟設(shè)計(jì)師溝通明確適配表現(xiàn)形式，遇到復(fù)雜的場(chǎng)景可以把內(nèi)容拆分出來(lái)區(qū)分適配。當(dāng)頁(yè)面內(nèi)容不適合方向旋轉(zhuǎn)展示，此時(shí)就不要無(wú)腦適配，有兩個(gè)方式可以選擇：
圖5
3、需要設(shè)定窗口等于設(shè)備物理寬度，即 viewport 為 width=device-width, initial-scale=1。
4、適配相關(guān)的 js 放在 head 里，文檔結(jié)構(gòu)加載完成就先執(zhí)行適配 js，給 body 加一個(gè)顯隱動(dòng)畫規(guī)避在 js 未執(zhí)行完成時(shí)頁(yè)面出現(xiàn)縮放前后，顯隱動(dòng)畫相關(guān)代碼如下：
最后，以上是我自己在這項(xiàng)目 H5 適配的方法和應(yīng)用，也許有更好的適配方案，請(qǐng)各位不吝賜教，多多指點(diǎn)。
藍(lán)藍(lán)設(shè)計(jì)( www.jghy.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net