【调研报告】响应式布局

响应式布局调研报告响应式布局已经被越来越多的网站采用，它的优势也很明显，它会根据不同的设备及设备分辨率的大小自动调整页面布局，充分利用屏幕尺寸达到最佳视觉效果。由于很多网站针对于手机端已经单独做了webapp，这里主要介绍的是PC端各分辨率对页面的影响，先看某页面各分辨率占比分布表，可以供交互及UE一个设计数据参考：排序分辨率大小占比11366x76831.4%21440x90016.72%31024x76813.46%41280x8007.22%51920x10805.54%61600x9004.81%71280x10243.7%81280x7682.52%91680x10502.38%101360x7682.2%百度文库系统环境各分辨率占比情况（数据来自百度统计）来看几个临界值，分辨率宽度大于1200、大小980且小于1200，小于980排序分辨率大小占比1120082.84%2980&&1200x16.66%39800.5%从统计数据看，分辨率宽度大于980的份额达到了99.5%，基本涵盖了所有的用户，分辨率大于1200的占比已达到82.84%，占据了绝大多数。为了充分利用用户的显示器可视区域，此次新首页将之前980的宽度提高到1200，由于980到1200的占比还是相对较大（16.66%），此次改版同时也需要兼容980的宽度。此次新首页改版，如果pad端和pc端要共用同一套模板的话，由于各代ipad的分辨率大小都在980以上，同时配合设置viewport相关属性，可以呈现和pc端一样的布局。下表是业内一些网站针对响应式布局的一些处理方式：网站兼容宽度最小宽度适中宽度最大宽度完全自适应宽度范围淘宝7409901190990–1190天猫990无1190无优酷970无1190无奇艺98011451310无百度图片980无1894980--1894亚马逊980无1900980--1900从调研这些网站来看，只有淘宝兼容了800–980之间的宽度，即当800*600分辨率的显示器访问淘宝首页时，在不通过拉动横向滚动条也能正常看到所有内容的。大多都是对两种特定的宽度做了处理，即针对窄屏980和宽屏的1190两种宽度，像百度图片及亚马逊，会在最小宽度和最大宽度之间完全自适应，即当可视区域宽度在最小宽度和最大宽度间发生变化时，显示的内容都会做出相应的调整，最大化利用用户的显示区域。此次文库新版首页也将采用两种宽度，即最小宽度980，最大宽度1200两种布局。实现方案有很多种，以下是常用的两种方式：1.css3的mediaquery，通过检测当前屏幕的尺寸，加载不同的css样式控制页面的布局，不支持css3的mediaquery，如ie9以下，通过js来动态计算当前可视区域的尺寸，设置相应的class。2.利用min-width和min-height，采用流体布局，即用百分比作为宽度的单位，这样当宽度发生变化时，显示内容会按照设置的百分比自动调整，当然ie6不支持min-width属性，也只能通过js来实现。采用响应式布局，其中很重要的一点是当宽度发生变化时，哪些内容需要显示或隐藏以及显示的策略，设计时对宽度的一些限制和要求，这些需要和交互、设计一起沟通、讨论、确认，以达到最使用体验！