以往拿到一份視覺稿要做頁面適配，通常都是針對不同解析度尺寸做斷點寫 mediaquery，然後看效果再微調。開發過程中視覺稿要是做了修改，修改的地方就得再走一遍解析度測試和微調，這時想屎的心都有了。而且這些適配都是建立在已知的解析度尺寸庫上，如果市面新出來一款解析度尺寸機型，呵呵，又要奔跑在測試微調路上。是不是能有用一套程式碼就適應各種解析度視窗，那麼就不會再有上面這些煩惱，且開發效率快和維護成本會降低很多。
答案是有的，而且這種形式早出現於 flash 全屏整站，前陣子拜讀了舉總介紹的一篇文章關於圖片適配屬性 Object-fit，發現這個屬性 Object-fit 雖然只能應用在圖片上，但是它的適配思路完全可以借鑑運用在 H5 頁面適配上，這種思路即是「縮放」，也是本篇文章的核心內容。就是無論視窗寬高比怎樣，頁面能自動縮放到視窗大小，而且元素的座標及大小還可以使用精確和便於 js 計算的 px 為單位。
這裡借用 Object-fit 的方法命名方便記憶，下面簡單介紹 H5 頁面適配幾種展現形式。
1 、 contain 模式：以內容中心為基點按照視覺稿的寬高比縮放以適配視窗顯示全頁面內容，視窗與內容的寬度比或高度比之間較小者縮放填滿視窗，當視窗寬高比和視覺稿不同時，另一方向的兩側出現留空部分。
2 、 cover 模式：以內容中心為基點按照視窗的寬高比等比縮放以適配視窗，視窗與內容的寬度比或高度比之間較大者縮放填滿視窗，當視窗寬高比和視覺稿不同時，另一方向的兩側超出視窗被裁剪，這種模式不會出現「contain 模式」的留空部分情況。
3 、 fill 模式：以內容中心為基點頁面拉伸填充滿整個視窗以適配視窗，當視窗寬高比和視覺稿不同時，內容一定程度上被拉伸。
4 、 scale-width 模式：頁面橫向縮放填充滿視窗，縱向按視覺稿的寬高比放大。出來的效果有兩種可能性，「contain 模式」或者「cover 模式」的效果。
5 、 scale-height 模式：頁面縱向縮放填充滿視窗，橫向按視覺稿的寬高比放大。出來的效果有兩種可能性，「contain 模式」或者「cover 模式」的效果。