如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

以往拿到一份視覺稿要做頁(yè)面適配，通常都是針對(duì)不同分辨率尺寸做斷點(diǎn)寫 media query，然后看效果再微調(diào)。開發(fā)過(guò)程中視覺稿要是做了修改，修改的地方就得再走一遍分辨率測(cè)試和微調(diào)，這時(shí)想屎的心都有了。而且這些適配都是建立在已 知的分辨率尺寸庫(kù)上，如果市面新出來(lái)一款分辨率尺寸機(jī)型，呵呵，又要奔跑在測(cè)試微調(diào)路上。是不是能有用一套代碼就適應(yīng)各種分辨率窗口，那么就不會(huì)再有上面 這些煩惱，且開發(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)按照視覺稿的寬高比縮放以適配窗口顯示全頁(yè)面內(nèi)容，窗口與內(nèi)容的寬度比或高度比之間較小者縮放填滿窗口，當(dāng)窗口寬高比和視覺稿不同時(shí)，另一方向的兩側(cè)出現(xiàn)留空部分。

2、cover 模式：以內(nèi)容中心為基點(diǎn)按照窗口的寬高比等比縮放以適配窗口，窗口與內(nèi)容的寬度比或高度比之間較大者縮放填滿窗口，當(dāng)窗口寬高比和視覺稿不同時(shí)，另一方向的兩側(cè)超出窗口被裁剪，這種模式不會(huì)出現(xiàn)「contain 模式」的留空部分情況。

3、fill 模式：以內(nèi)容中心為基點(diǎn)頁(yè)面拉伸填充滿整個(gè)窗口以適配窗口，當(dāng)窗口寬高比和視覺稿不同時(shí)，內(nèi)容一定程度上被拉伸

4、scale-width 模式：頁(yè)面橫向縮放填充滿窗口，縱向按視覺稿的寬高比放大。出來(lái)的效果有兩種可能性，「contain 模式」或者「cover 模式」的效果。

5、scale-height 模式：頁(yè)面縱向縮放填充滿窗口，橫向按視覺稿的寬高比放大。出來(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)綜合考慮:

1. 客戶端分辨率占比數(shù)。根據(jù)友盟和騰訊云運(yùn)營(yíng)活動(dòng)近幾個(gè)月的數(shù)據(jù)統(tǒng)計(jì)，iphone5/5s 640*1136 這個(gè)分辨率是 Ios 平臺(tái)占比最多的，同時(shí)過(guò)高的分辨率對(duì)低端機(jī)型是一種浪費(fèi)，需要花額外多的流量來(lái)下載這些資源；
2. 同寬高比尺寸的平臺(tái)占比數(shù)。同樣尺寸比的 Android 平臺(tái)分辨率 720*1280 和 1080*1920 占比數(shù)也是最多的。

拿最近做的項(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ū)域，但從視覺體驗(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)景需求選擇合適的方法，兩者主要不同是：

1. zoom 的基點(diǎn)不能自定義，固定是左上角 (0,0)；
2. transform:scale(x,y) 縮放轉(zhuǎn)換后仍占據(jù)原始空間大小，zoom 縮放轉(zhuǎn)換后占據(jù)空間等于縮放后的大小。

還有一些復(fù)雜的層，但無(wú)外乎都可以拆分成以上幾種類型層，將內(nèi)容分層出來(lái)，每個(gè)層根據(jù)內(nèi)容形式選用相應(yīng)的適配模式進(jìn)行縮放。

總結(jié)

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è)方式可以選擇：

1. 找設(shè)計(jì)師出一版另一方向的響應(yīng)式設(shè)計(jì)稿然后制作成響應(yīng)式頁(yè)面；
2. 出現(xiàn)提示方式讓用戶旋轉(zhuǎn)回支持的方向，比如（圖5）。

圖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)。

參考文獻(xiàn)

1. Danny, Markov. Quick Tip: Get to Know the CSS Object Fit and Position Properties[EB/OL]. http://tutorialzine.com/2016/04/quick-tip-get-to-know-css-object-fit-position/, 2016-04-19

藍(lán)藍(lán)設(shè)計(jì)( m.cqzjtgb.com )是一家專注而深入的界面設(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ù)