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