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

以往拿到一份视觉稿要做页面适配，通常都是针对不同分辨率尺寸做断点写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模式」的效果。