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

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

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

　　1、contain模式：以?xún)热葜行臑榛c(diǎn)按照視覺(jué)稿的寬高比縮放以適配窗口顯示全頁(yè)面內容，窗口與內容的寬度比或高度比之間較小者縮放填滿(mǎn)窗口，當窗口寬高比和視覺(jué)稿不同時(shí)，另一方向的兩側出現留空部分。

http://ezekroy.com/jianzhanzhishi/7193.html 響應式網(wǎng)站建設 H5如何高效適配