当前位置: 首页 > news >正文

响应式设计(Response Web Design)浅谈

响应式Web设计,这个话题可能是当下Web设计领域里讨论和应用比较多的话题了,为什么要响应式Web设计?什么是响应式Web设计?

Web发展迅速,各种应用和服务层出不穷,现在打开电脑,可能使用最多的程序应该是浏览器了,访问不同的网站,可以满足人们购物,社交,获取新闻资讯,娱乐,等等需求。然而近几年内,移动设备快速崛起,移动互联网慢慢进入人们的生活,预计未来5年内移动设备的使用度会超过桌面计算机。所以需要您的网站不仅要在桌面计算机大尺寸屏幕上可以为用户提供友好的UI和用户体验,同时在小尺寸屏幕上也应该可以提供一致的用户体验。使得用户可以在桌面大屏幕上和移动小屏幕上平滑的切换使用,同时没有任何的不适应感觉。

clip_image002

(移动设备趋势:http://www.webhostingbuzz.com/blog/2011/10/19/mobile-internet-trends/)

要网站在桌面大尺寸屏幕上和移动小尺寸屏幕上提供一致的用户体验,最直接的方法就是为每种设备及分辨率制作一个网站或者特定的页面,使得移动用户在这些页面里取得平滑友好的用户体验。但是到底有多少不同的移动设备和屏幕分辨率呢?这种方法需要投入多少成本能?

clip_image003

(早先的数据:2005至2008年市场中的400余种移动设备的统计情况

http://www.quirksmode.org/mobile/mobilemarket.html)

这份统计结果已经比较早了,随着时间的推移,又有很多移动设备投入市场,为每种设备及分辨率制作一个网站或者特定的页面,这应该是比较大的工作量,是比较耗时耗费资源的。是否可以只做一个网站一套页面,既满足桌面大尺寸屏幕,同时也可以满足各种不同移动设备的小尺寸屏幕。

因为有了这个问题,才有了响应式Web设计这种方案:一个网站能够兼容多种移动设备屏幕尺寸,而不是为每种屏幕尺寸做一个特定的版本。这个概念可以说是为移动互联网而生的。国外已经有一些这样的应用例子了,如: http://foodsense.is/, 此网站在Android 上的效果:

clip_image004

不采用响应式Web设计 news.sina.com.cn 在Android上的效果,需要用双指进行缩放才能友好浏览:

clip_image005

foodsense.is 在其它设备分辨率下的情况:

clip_image007

(iPad1/2 1024X768 横向)

clip_image009

(iPad1/2 1024X768 纵向)

clip_image010

(iPhone4 320X480 横向)

clip_image011

(iPhone4 320X480 纵向)

clip_image012

(ASUS Galaxy 7 480X800 纵向)

foodsense.is 可以在各种设备分辨率下,根据分辨率的不同做出响应,对菜单和图片进行重新布局,来满足显示的需要。这种技术就是响应式Web设计,这个概念是Ethan Marcotte在A List Apart发表的一篇文章"Responsive Web Design" (http://www.alistapart.com/articles/responsive-web-design/) 中援引响应式建筑而得名的: “响应式建筑(responsive architecture),物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用,建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构,还可以使用运动传感器配合气候控制系统,调整室内的温度及环境光。已经有公司在生产"智能玻璃":当室内人数达到一定的阀值时,这种玻璃可以自动变为不透明,确保隐私。” Web借由建筑上这个概念,当设备分辨率发生变化时,根据设备分辨率,调整菜单,图片,文字,等其它页面DOM的状态和布局,使得页面仍然可以给用户提供友好的使用体验。

 

未完待续……

相关文章:

  • 查询 ip占用导致ip不通的 问题 查IP对应的mac地址
  • 删除MyEclipse 6.5.1自带的Maven4MyEclipse
  • ulimt 和 sysctl
  • linux /etc/profile bashrc bash_profile
  • 多服务器的日志合并统计——apache日志的cronolog轮循
  • systemctl daemon-reload
  • Unicast
  • souce and bash 的区别
  • php.ini设置详解(转)
  • sersync+rsync实现实时同步
  • open cv图像矩阵的掩膜操作
  • open cvMat的使用
  • open cv像素的操作
  • 一个简单的Spring Web Service示例
  • open cv图片混合
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • CSS中外联样式表代表的含义
  • nodejs实现webservice问题总结
  • Python实现BT种子转化为磁力链接【实战】
  • ReactNative开发常用的三方模块
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 使用 QuickBI 搭建酷炫可视化分析
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 为视图添加丝滑的水波纹
  • 数据库巡检项
  • 智能情侣枕Pillow Talk,倾听彼此的心跳
  • #14vue3生成表单并跳转到外部地址的方式
  • (1)(1.8) MSP(MultiWii 串行协议)(4.1 版)
  • (1)(1.9) MSP (version 4.2)
  • (6)STL算法之转换
  • (ZT)出版业改革:该死的死,该生的生
  • (二十四)Flask之flask-session组件
  • (六)激光线扫描-三维重建
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (免费领源码)python#django#mysql校园校园宿舍管理系统84831-计算机毕业设计项目选题推荐
  • (四)搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (图)IntelliTrace Tools 跟踪云端程序
  • (详细版)Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models
  • (原創) 如何刪除Windows Live Writer留在本機的文章? (Web) (Windows Live Writer)
  • (转) Face-Resources
  • (转) RFS+AutoItLibrary测试web对话框
  • .NET CF命令行调试器MDbg入门(四) Attaching to Processes
  • .net core开源商城系统源码,支持可视化布局小程序
  • .NET MVC 验证码
  • .NET8.0 AOT 经验分享 FreeSql/FreeRedis/FreeScheduler 均已通过测试
  • .NET连接数据库方式
  • .NET中winform传递参数至Url并获得返回值或文件
  • .stream().map与.stream().flatMap的使用
  • .vollhavhelp-V-XXXXXXXX勒索病毒的最新威胁:如何恢复您的数据?
  • @KafkaListener注解详解(一)| 常用参数详解
  • @拔赤:Web前端开发十日谈
  • [AI]文心一言爆火的同时,ChatGPT带来了这么多的开源项目你了解吗
  • [AutoSar]BSW_Com02 PDU详解
  • [CSS] - 修正IE6不支持position:fixed的bug