1、contain 模式：以內容中心為基點按照視覺稿的寬高比縮放以適配窗口顯示全頁面內容，窗口與內容的寬度比或高度比之間較小者縮放填滿窗口，當窗口寬高比和視覺稿不同時，另一方向的兩側出現留空部分。
2、cover 模式：以內容中心為基點按照窗口的寬高比等比縮放以適配窗口，窗口與內容的寬度比或高度比之間較大者縮放填滿窗口，當窗口寬高比和視覺稿不同時，另一方向的兩側超出窗口被裁剪，這種模式不會出現「contain 模式」的留空部分情況。
3、fill 模式：以內容中心為基點頁面拉伸填充滿整個窗口以適配窗口，當窗口寬高比和視覺稿不同時，內容一定程度上被拉伸
4、scale-width 模式：頁面橫向縮放填充滿窗口，縱向按視覺稿的寬高比放大。出來的效果有兩種可能性，「contain 模式」或者「cover 模式」的效果。
5、scale-height 模式：頁面縱向縮放填充滿窗口，橫向按視覺稿的寬高比放大。出來的效果有兩種可能性，「contain 模式」或者「cover 模式」的效果。
下面分別來介紹我在項目中的對於適配的思考和選擇以及實現方法。
在做適配之前，首先要和設計師定義好頁面的寬高比，即設計稿的分辨率大小，因為活動主要是通過微信進行傳播推廣，所以這里我使用的是 iphone5/5s 機型微信瀏覽器窗口分辨率 640*1008。選擇這個分辨率主要出於以下 2 點綜合考慮:
- 客戶端分辨率占比數。根據友盟和騰訊雲運營活動近幾個月的數據統計，iphone5/5s 640*1136 這個分辨率是 Ios 平台占比最多的，同時過高的分辨率對低端機型是一種浪費，需要花額外多的流量來下載這些資源；
- 同寬高比尺寸的平台占比數。同樣尺寸比的 Android 平台分辨率 720*1280 和 1080*1920 占比數也是最多的。
拿最近做的項目舉例，該 H5 頁面基本可歸類為以下 4 種內容類型：
1、填充滿窗口的層，比如背景幕布（圖1）。
圖1
這種層實現最簡單，采用「fill 模式」適配形式。實現效果核心代碼如下：
圖1 中的圖片適配處理，采用「cover 模式」適配形式。實現效果核心代碼如下：
2、同時基於水平方向和垂直方向居中的層，比如頁面正文內容部分（圖2）。
圖2
像這種層背景色是純色或透明，「contain 模式」是最佳選擇可在任何分辨率窗口顯示全頁面內容，出現留空部分的顏色可以通過添加一個寬高 100% 的層設置背景屬性來修補。實現效果代碼如下：
3、填充滿整個窗口且邊緣不是純色的層，比如（圖3）。
圖3
「cover 模式」和「fill 模式」可以作為選擇。從易用性看，「fill 模式」可以精確適應窗口區域，但從視覺體驗上看，寬高不等比例的拉伸會造成圖片失真，同時該層的主要內容及交互操作集中在中部，不重要的邊緣可以適當被裁 剪，故這里選擇「cover 模式」來做適配會更好，實現效果代碼同上面示例基本一樣，區別在於縮放比處，代碼如下：
4、大於屏幕的層，可實現跟隨手勢移動場景畫面，比如（圖4）。
圖4
「scale-width 模式」和「scale-height 模式」適合運用在這類場景，（圖4）是橫向左右移動層，故這里選用「scale-height 模式」適配形式。實現效果代碼如下：
這里寬高等比縮放使用方法除了 transform:scale(x,y)，也可以使用 zoom 進行縮放，視實際場景需求選擇合適的方法，兩者主要不同是：
- zoom 的基點不能自定義，固定是左上角 (0,0)；
- transform:scale(x,y) 縮放轉換后仍占據原始空間大小，zoom 縮放轉換后占據空間等於縮放后的大小。
還有一些復雜的層，但無外乎都可以拆分成以上幾種類型層，將內容分層出來，每個層根據內容形式選用相應的適配模式進行縮放。
總結
1、高效適配的核心思想是「縮放」。
2、每一種適配模式都不是絕對的，需要根據需求場景選用合適的形式。適配前先跟設計師溝通明確適配表現形式，遇到復雜的場景可以把內容拆分出來區分適配。當頁面內容不適合方向旋轉展示，此時就不要無腦適配，有兩個方式可以選擇：
- 找設計師出一版另一方向的響應式設計稿然后制作成響應式頁面；
- 出現提示方式讓用戶旋轉回支持的方向，比如（圖5）。
圖5
3、需要設定窗口等於設備物理寬度，即 viewport 為 width=device-width, initial-scale=1。
4、適配相關的 js 放在 head 里，文檔結構加載完成就先執行適配 js，給 body 加一個顯隱動畫規避在 js 未執行完成時頁面出現縮放前后，顯隱動畫相關代碼如下：
