响应式网站建设 H5如何高效适配

"　　以往拿到一份视觉稿要做页面适配，响应效适通常都是式网设针对不同分辨率尺寸做断点写mediaquery，然后看效果再微调。站建开发过程中视觉稿要是何高做了修改，修改的响应效适地方就得再走一遍分辨率测试和微调，这时想屎的式网设心都有了。而且这些适配都是站建建立在已知的分辨率尺寸库上，如果市面新出来一款分辨率尺寸机型，何高呵呵，响应效适又要奔跑在测试微调路上。式网设是站建不是能有用一套代码就适应各种分辨率窗口，那么就不会再有上面这些烦恼，何高且开发效率快和维护成本会降低很多。响应效适

　　答案是式网设有的，而且这种形式早出现于flash全屏整站，站建前阵子拜读了举总介绍的一篇文章关于图片适配属性Object-fit，发现这个属性Object-fit虽然只能应用在图片上，但是它的适配思路完全可以借鉴运用在H5页面适配上，这种思路即是「缩放」，也是本篇文章的核心内容。就是无论窗口宽高比怎样，页面能自动缩放到窗口大小，而且元素的坐标及大小还可以使用精确和便于js计算的px为单位。

　　这里借用Object-fit的方法命名方便记忆，下面简单介绍H5页面适配几种展现形式。