响应式布局调研报告
2019年
响应式布局已经被越来越多的网站采用，它的优势也很明显，它会根据不同的设备及设备分辨率的大小自动调整页面布局，充分利用屏幕尺寸达到最佳视觉效果。

由于很多网站针对于手机端已经单独做了webapp，这里主要介绍的是PC端各分辨率对页面的影响，先看某页面各分辨率占比分布表，可以供交互及UE一个设计数据参考：
百度文库系统环境各分辨率占比情况（数据来自百度统计）
来看几个临界值，分辨率宽度大于1200、大小980且小于1200，小于980
从统计数据看，分辨率宽度大于980的份额达到了99.5%，基本涵盖了所有的用户，分辨率大于1200的占比已达到82.84%，占据了绝大多数。

为了充分利用用户的显示器可视区域，此次新首页将之前980的宽度提高到1200，由于980到1200的占比还是相对较大（16.66%），此次改版同时也需要兼容980的宽度。

此次新首页改版，如果pad端和pc端要共用同一套模板的话，由于各代ipad的分辨率大小都在980以上，同时配合设置viewport相关属性，可以呈现和pc端一样的布局。

下表是业内一些网站针对响应式布局的一些处理方式：
从调研这些网站来看，只有淘宝兼容了800 – 980之间的宽度，即当800*600分辨率的显示器访问淘宝首页时，在不通过拉动横向滚动条也能正常看到所有内容的。

大多都是对两
种特定的宽度做了处理，即针对窄屏980和宽屏的1190两种宽度，像百度图片及亚马逊，会在最小宽度和最大宽度之间完全自适应，即当可视区域宽度在最小宽度和最大宽度间发生变化时，显示的内容都会做出相应的调整，最大化利用用户的显示区域。

此次文库新版首页也将采用两种宽度，即最小宽度980，最大宽度1200两种布局。

实现方案有很多种，以下是常用的两种方式：
1.css3 的media query，通过检测当前屏幕的尺寸，加载不同的css样式控制页面的布局，
不支持css3的media query，如ie9以下，通过js来动态计算当前可视区域的尺寸，设置相应的class。

2.利用min-width和min-height，采用流体布局，即用百分比作为宽度的单位，这样当宽
度发生变化时，显示内容会按照设置的百分比自动调整，当然ie6不支持min-width属性，也只能通过js来实现。

采用响应式布局，其中很重要的一点是当宽度发生变化时，哪些内容需要显示或隐藏以及显示的策略，设计时对宽度的一些限制和要求，这些需要和交互、设计一起沟通、讨论、确认，以达到最使用体验！。