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

以往拿到一份視覺稿要做頁面適配，通常都是針對不同分辨率尺寸做斷點(diǎn)寫 media query，然后看效果再微調(diào)。開發(fā)過程中視覺稿要是做了修改，修改的地方就得再走一遍分辨率測試和微調(diào)，這時想屎的心都有了。而且這些適配都是建立在已 知的分辨率尺寸庫上，如果市面新出來一款分辨率尺寸機(jī)型，呵呵，又要奔跑在測試微調(diào)路上。是不是能有用一套代碼就適應(yīng)各種分辨率窗口，那么就不會再有上面 這些煩惱，且開發(fā)效率快和維護(hù)成本會降低很多。

答案是有的，而且這種形式最早出現(xiàn)于 flash 全屏整站，前陣子拜讀了舉總介紹的一篇文章關(guān)于圖片適配屬性 Object-fit ，發(fā)現(xiàn)這個屬性 Object-fit  雖然只能應(yīng)用在圖片上，但是它的適配思路完全可以借鑒運(yùn)用在 H5 頁面適配上，這種思路即是「縮放」，也是本篇文章的核心內(nèi)容。就是無論窗口寬高比怎樣，頁面能自動縮放到窗口大小，而且元素的坐標(biāo)及大小還可以使用和便于js計(jì)算的px為單位。

這里借用 Object-fit 的方法命名方便記憶，下面簡單介紹 H5 頁面適配幾種展現(xiàn)形式。

1、contain 模式：以內(nèi)容中心為基點(diǎn)按照視覺稿的寬高比縮放以適配窗口顯示全頁面內(nèi)容，窗口與內(nèi)容的寬度比或高度比之間較小者縮放填滿窗口，當(dāng)窗口寬高比和視覺稿不同時，另一方向的兩側(cè)出現(xiàn)留空部分。

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

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

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

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

下面分別來介紹我在項(xiàng)目中的對于適配的思考和選擇以及實(shí)現(xiàn)方法。

在做適配之前，首先要和設(shè)計(jì)師定義好頁面的寬高比，即設(shè)計(jì)稿的分辨率大小，因?yàn)榛顒又饕峭ㄟ^微信進(jìn)行傳播推廣，所以這里我使用的是 iphone5/5s 機(jī)型微信瀏覽器窗口分辨率 640*1008。選擇這個分辨率主要出于以下 2 點(diǎn)綜合考慮:

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

拿最近做的項(xiàng)目舉例，該 H5 頁面基本可歸類為以下 4 種內(nèi)容類型：

1、填充滿窗口的層，比如背景幕布（圖1）。

圖1

這種層實(shí)現(xiàn)最簡單，采用「fill 模式」適配形式。實(shí)現(xiàn)效果核心代碼如下：

圖1 中的圖片適配處理，采用「cover 模式」適配形式。實(shí)現(xiàn)效果核心代碼如下：

2、同時基于水平方向和垂直方向居中的層，比如頁面正文內(nèi)容部分（圖2）。

圖2

像這種層背景色是純色或透明，「contain 模式」是最佳選擇可在任何分辨率窗口顯示全頁面內(nèi)容，出現(xiàn)留空部分的顏色可以通過添加一個寬高 100% 的層設(shè)置背景屬性來修補(bǔ)。實(shí)現(xiàn)效果代碼如下：

3、填充滿整個窗口且邊緣不是純色的層，比如（圖3）。

圖3

「cover 模式」和「fill 模式」可以作為選擇。從易用性看，「fill 模式」可以適應(yīng)窗口區(qū)域，但從視覺體驗(yàn)上看，寬高不等比例的拉伸會造成圖片失真，同時該層的主要內(nèi)容及交互操作集中在中部，不重要的邊緣可以適當(dāng)被裁 剪，故這里選擇「cover 模式」來做適配會更好，實(shí)現(xiàn)效果代碼同上面示例基本一樣，區(qū)別在于縮放比處，代碼如下：

4、大于屏幕的層，可實(shí)現(xiàn)跟隨手勢移動場景畫面，比如（圖4）。

圖4

「scale-width 模式」和「scale-height 模式」適合運(yùn)用在這類場景，（圖4）是橫向左右移動層，故這里選用「scale-height 模式」適配形式。實(shí)現(xiàn)效果代碼如下：

這里寬高等比縮放使用方法除了 transform:scale(x,y)，也可以使用 zoom 進(jìn)行縮放，視實(shí)際場景需求選擇合適的方法，兩者主要不同是：

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

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

總結(jié)

1、適配的核心思想是「縮放」。

2、每一種適配模式都不是絕對的，需要根據(jù)需求場景選用合適的形式。適配前先跟設(shè)計(jì)師溝通明確適配表現(xiàn)形式，遇到復(fù)雜的場景可以把內(nèi)容拆分出來區(qū)分適配。當(dāng)頁面內(nèi)容不適合方向旋轉(zhuǎn)展示，此時就不要無腦適配，有兩個方式可以選擇：

1. 找設(shè)計(jì)師出一版另一方向的響應(yīng)式設(shè)計(jì)稿然后制作成響應(yīng)式頁面；
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 加一個顯隱動畫規(guī)避在 js 未執(zhí)行完成時頁面出現(xiàn)縮放前后，顯隱動畫相關(guān)代碼如下：

最后，以上是我自己在這項(xiàng)目 H5 適配的方法和應(yī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ì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)