您的浏览器Javascript被禁用,需开启后体验完整功能, 请单击此处查询如何开启
网页 资讯 视频 图片 知道 贴吧 采购 地图 文库 |

【调研报告】响应式布局_互联网_IT/计算机_专业资料

2601人阅读|189次下载

标签:
  • 响应式|
  • 布局|

【调研报告】响应式布局_互联网_IT/计算机_专业资料。响应式布局已经被越来越多的网站采用,它的优势也很明显,它会根据不同的设备及设备分辨率的大小自动调整页面布局,充分利用屏幕尺寸达到最佳视觉效果。


响应式布局调研报告 响应式布局已经被越来越多的网站采用, 它的优势也很明显, 它会根据不同的设备及设 备分辨率的大小自动调整页面布局,充分利用屏幕尺寸达到最佳视觉效果。 由于很多网站针对于手机端已经单独做了 webapp,这里主要介绍的是 PC 端各分辨率 对页面的影响,先看某页面各分辨率占比分布表,可以供交互及 UE 一个设计数据参考: 排序 1 2 3 4 5 6 7 8 9 10 分辨率大小 1366x768 1440x900 1024x768 1280x800 1920x1080 1600x900 1280x1024 1280x768 1680x1050 1360x768 占比 31.4% 16.72% 13.46% 7.22% 5.54% 4.81% 3.7% 2.52% 2.38% 2.2% 大发快3概率_快3官网pk10_平台文库系统环境各分辨率占比情况(数据来自大发快3概率_快3官网pk10_平台统计) 来看几个临界值,分辨率宽度大于 1200、大小 980 且小于 1200,小于 980 排序 1 2 3 分辨率大小 > 1200 > 980 &&< 1200 x < 980 占比 82.84% 16.66% 0.5% 从统计数据看,分辨率宽度大于 980 的份额达到了 99.5%,基本涵盖了所有的用户,分 辨率大于 1200 的占比已达到 82.84%,占据了绝大多数。为了充分利用用户的显示器可视区 域,此次新首页将之前 980 的宽度提高到 1200,由于 980 到 1200 的占比还是相对较大 (16.66%),此次改版同时也需要兼容 980 的宽度。 此次新首页改版,如果 pad 端和 pc 端要共用同一套模板的话,由于各代 ipad 的分辨率 大小都在 980 以上,同时配合设置 viewport 相关属性,可以呈现和 pc 端一样的布局。下表 是业内一些网站针对响应式布局的一些处理方式: 兼容宽度 网站 最小宽度 淘宝 天猫 优酷 奇艺 大发快3概率_快3官网pk10_平台图片 亚马逊 740 990 970 980 980 980 适中宽度 990 无 无 1145 无 无 最大宽度 1190 1190 1190 1310 1894 1900 完全自适应宽度范围 990 – 1190 无 无 无 980 -- 1894 980 -- 1900 从调研这些网站来看,只有淘宝兼容了 800 – 980 之间的宽度,即当 800*600 分辨率的 显示器访问淘宝首页时, 在不通过拉动横向滚动条也能正常看到所有内容的。 大多都是对两 种特定的宽度做了处理,即针对窄屏 980 和宽屏的 1190 两种宽度,像大发快3概率_快3官网pk10_平台图片及亚马逊, 会在最小宽度和最大宽度之间完全自适应, 即当可视区域宽度在最小宽度和最大宽度间发生 变化时,显示的内容都会做出相应的调整,最大化利用用户的显示区域。 此次文库新版首页也将采用两种宽度,即最小宽度 980,最大宽度 1200 两种布局。实 现方案有很多种,以下是常用的两种方式: 1. css3 的 media query,通过检测当前屏幕的尺寸,加载不同的 css 样式控制页面的布局, 不支持 css3 的 media query,如 ie9 以下,通过 js 来动态计算当前可视区域的尺寸,设 置相应的 class。 2. 利用 min-width 和 min-height,采用流体布局,即用百分比作为宽度的单位,这样当宽 度发生变化时,显示内容会按照设置的百分比自动调整,当然 ie6 不支持 min-width 属 性,也只能通过 js 来实现。 采用响应式布局, 其中很重要的一点是当宽度发生变化时, 哪些内容需要显示或隐藏以 及显示的策略,设计时对宽度的一些限制和要求,这些需要和交互、设计一起沟通、讨论、 确认,以达到最使用体验!

您的评论

发布评论

用户评价

  • 关于响应式的内容,力荐 2018-06-20 00:47:58
+申请认证

文档贡献者

张臣

大发快3概率_快3官网pk10_平台web前端开发工程师

23 10076988 4.2
文档数 浏览总量 总评分

喜欢此文档的还喜欢