以前拿到視覺稿做頁面適配，通常是針對不同的分辨率尺寸做斷點寫mediaquery，看效果再微調。如果在開發過程中對視覺稿進行了修改，則必須再次進行分辨率測試和微調試和微調，然后想要糞便的心就有了。此外，這些適應性是基于已知的分辨率尺寸庫。如果市場上有新的分辨率尺寸模型，哈哈，你必須在測試微調的路上奔跑。是否可以使用一套代碼來適應各種分辨率窗口，那么就不會有上述問題，快速的開發效率和維護成本將大大降低。

　　答案是肯定的，這種形式早就出現了flash全屏全站，前段時間看了一篇關于圖片適應屬性的文章。Object-fit，找到這個屬性Object-fit雖然只能應用于圖片，但其適應思路可以借鑒H5頁面適應，這個想法就是「縮放」，也是本文的核心內容。也就是說，無論窗口的寬度比如何，頁面都可以自動縮放到窗口的大小，元素的坐標和大小也可以準確方便地使用js計算的px為單位。

　　這里借用Object-fit方法命名方便記憶，下面簡要介紹H5頁適用于幾種顯示形式。

　　1、contain模式：以內容中心為基礎，根據視覺草案的寬度和高度比進行縮放，以適應窗口顯示整個頁面的內容。窗口與內容之間的寬度比或高度比較小，填充窗口。當窗口的寬度和高度比與視覺草案不同時，另一個方向的兩側都有一個空的部分。