文档介绍：响应式布局调研报告响应式布局已经被越来越多的网站采用, 它的优势也很明显, 它会根据不同的设备及设备分辨率的大小自动调整页面布局,充分利用屏幕尺寸达到最佳视觉效果。由于很多网站针对于手机端已经单独做了 webapp ,这里主要介绍的是 PC 端各分辨率对页面的影响,先看某页面各分辨率占比分布表,可以供交互及 UE 一个设计数据参考: 排序分辨率大小占比 1 1366x768 % 2 1440x900 % 3 1024x768 % 4 1280x800 % 5 1920x1080 % 6 1600x900 % 7 1280x1024 % 8 1280x768 % 9 1680x1050 % 10 1360x768 % 百度文库系统环境各分辨率占比情况(数据来自百度统计) 来看几个临界值,分辨率宽度大于 1200 、大小 980 且小于 1200 ,小于 980 排序分辨率大小占比 1> 1200 % 2> 980 && < 1200 x % 3< 980 % 从统计数据看,分辨率宽度大于 980 的份额达到了 % ,基本涵盖了所有的用户,分辨率大于 1200 的占比已达到 % , 占据了绝大多数。为了充分利用用户的显示器可视区域,此次新首页将之前 980 的宽度提高到 1200 ,由于 980 到 1200 的占比还是相对较大( % ),此次改版同时也需要兼容 980 的宽度。此次新首页改版, 如果 pad 端和 pc 端要共用同一套模板的话, 由于各代 ipad 的分辨率大小都在 980 以上, 同时配合设置 viewport 相关属性, 可以呈现和 pc 端一样的布局。下表是业内一些网站针对响应式布局的一些处理方式: 网站兼容宽度最小宽度适中宽度最大宽度完全自适应宽度范围淘宝 740 990 1190 990 – 1190 天猫 990 无 1190 无优酷 970 无 1190 无奇艺 980 1145 1310 无百度图片 980 无 1894 980 -- 1894 亚马逊 980 无 1900 980 -- 1900 从调研这些网站来看,只有淘宝兼容了 800 – 980 之间的宽度,即当 800*600 分辨率的显示器访问淘宝首页时, 在不通过拉动横向滚动条也能正常看到所有内容的。大多都是对两种特定的宽度做了处理,即针对窄屏 980 和宽屏的 1190 两种宽度,像百度图片及亚马逊, 会在最