如何打造一个高效适配的H5.docVIP

如何打造一个高效适配的H5 　　本文主要分享打造一个高效适配H5的小技巧，希望对大家有所帮助。 　　 　　以往拿到一份视觉稿要做页面适配，通常都是针对不同分辨率尺寸做断点写 media query，然后看效果再微调。开发过程中视觉稿要是做了修改，修改的地方就得再走一遍分辨率测试和微调，这时想屎的心都有了。而且这些适配都是建立在已知的分辨率尺寸库上，如果市面新出来一款分辨率尺寸机型，呵呵，又要奔跑在测试微调路上。是不是能有用一套代码就适应各种分辨率窗口，那么就不会再有上面 这些烦恼，且开发效率快和维护成本会降低很多。 　　答案是有的，而且这种形式最早出现于 flash 全屏整站，前阵子拜读了举总介绍的一篇文章关于图片适配属性Object-fit，发现这个属性Object-fit 虽然只能应用在图片上，但是它的适配思路完全可以借鉴运用在H5 页面适配上，这种思路即是「缩放」，也是本篇文章的核心内容。就是无论窗口宽高比怎样，页面能自动缩放到窗口大小，而且元素的坐标及大小还可以使用精确和便于js计算的px为单位。 　　这里借用 Object-fit的方法命名方便记忆，下面简单介绍 H5 页面适配几种展现形式。 　　1、contain 模式：以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容，窗口与内容的宽度比或高度比之间较小者缩放填满窗口，当窗口宽高比和视觉稿不同时，另一方向的