设备兼容思考——RWD:响应式WEB

【1】曹树金, 吴育冰. 响应式Web设计及其在图书馆门户网站中的应用——以“211”高校图书馆为例[J]. 图书情报研究, 2016(1):30-34.

【2】Qayyum A. Responsive Web DesignAn Ultimate GuideEB/OL.2015 -06 -01. http//smashinghub.com/responsive -web-design-an-ultimate-guide.html

【3】Marcotte E. Responsive Web DesignEB/OL.2015-06-01.http//www.alistapart.com/articles/responsive-web-design/

【4】[美]加德纳,[美]格里格斯比. Head First Mobile Web 中文版[ M. 林 琪,刘晓兵,等,译. 北京:中国电力出版社,2013357-415.

     
全部文字来源【1】

实例:挑战——响应式Web 设计建设图书馆网站[1]

         1. 困难: 如何对数据库供应商馆际互借系统联机公共检索目录等外部链接实现响应式。

         2. 备选:当采用非响应式Web 设计建设网站:需要分别建设PC 端网站、Wap 端网站和开发 App

         3. 响应式 Web 设计就是最好的?[4]

       回答是否定的因为目前响应式 web 设计仅关注了台式电脑平板电脑和移动设备,然而各种联网设备汹涌而来,如智能电视机联网汽车支持 Internet的冰箱等,因此 Web 设计也将不会仅局限于某一种平台所以,高校图书馆网站是分别建设 PC网站Wap 网站和开发 App,还是向响应式网站设计发展,关键是要学会 随波逐流,掌握不确定性,用一种未来友好的思维,顺应潮流,确保一定要灵活,能够适应未来的一切变化[4]。


Responsive Web Design,  RWD

美国著名网站设计师伊桑· 马科特(Ethan Marcotte提出了应式Web 设计Responsive Web Design,简称RWD,也称自适应网页设计)的概念,指的是可以自动识别屏幕宽度并做出相应调整的网页设计【2】

响应式 Web设计旨在实现一个网站能够兼容多个终端/设备上都能漂亮显示的网站


Ethan Marcotte指出只针对前台界面,响应式Web设计需要三种核心技术

(1)媒体查询Media Queries

媒体查询Media Queries是实现响应式Web 设计的核心技术它是CSS3 的一种新特性,用于设置某种媒体特征下的显示规则RWD 设计布局时,媒体查询顺序采用移动端向上设计,首先优先建立移动用户体验,然后使用媒体查询调整大屏幕[5]媒体查询不仅可以向不同设备提供不同的样式,为不同类型的用户提供最佳的体验,还允许设计人员基于各自不同类型的设备属性(如:屏幕宽度方向分辨率等)来确定目标样式媒体查询支持IE9Firefox3.5Safari3以及它们的更高版本,同时支持大部分智能手机和其他基于屏幕的设备

(2)流式网格布局fluid grids

在传统网站中,固定布局的页面宽度会使用特定大小的像素,虽然我们可以通过手指在屏幕上缩放页面,但这样的操作会让我们感到繁琐然而,在响应式Web 设计中采用了流动布局,流动布局以百分比为单位,如果我们设计分别占页面1/4 的左右栏,只需要定义它们的宽度为25%,而不用再去考虑用户到底是使用多宽的浏览器,因为元素的宽度会根据屏幕大小来调整自身的布局,使页面具有可变的特性,能够更好地适应不同的用户

3)弹性图像和媒体弹性图片(scalable images

弹性视觉媒体设计的本质是保证视觉媒体能够灵活地适应不同的布局及其可读性在响应式Web 设计中通过使用一些 CSS 技巧,使图像和媒体比例限制在其父元素范围之内,相应于布局的其他部分按比例缩放,以适应其设备的大小通过弹性图像和媒体,不仅可以调整网站,让它在手机平板电脑上与在桌面上同样表现;还可以识别用户的设备并完成分类,为各类型的设备提供最佳内容

 


AliQayyum[6]全面地归纳了响应式Web 设计的优缺点

响应式Web 设计的一些优点如下:

用户友好用户友好不仅是响应式Web设计的最大优点,还是响应式 Web 设计的主要目的响应式Web 设计能够适应几乎所有设备的屏幕,提供友好的界面,使用户能够保持与网站一致的体验
移动段在响应式Web 网站的帮助下,你可以获得你的网站流量的完整视图而你所需要做的就是创建一个移动频段,就可以获得与你的网站流量相关的所有必要的信息通过统计流量来分析网站的性能及采取必要的措施对改善网站是非常有用的
累积分享响应式Web 设计能够使网站的拥有者通过单一的URL 地址收集所有社交分享的链接,来创建更友好的网站
搜索引擎最佳化搜索引擎最佳化不仅能够智能地完成桌面网站与移动网站的链接,还通过采用易于搜索引擎索引的合理手段,使网站对用户和搜索引擎更加友好,从而更容易被搜索引擎收录及优先排序[7]
重定向通过响应式Web 设计,设计师不需要任何重定向,也不涉及任何代理目标因此,当你不需要解决重定向和定向用户时,这是一件很了不起的事情
成本低维护少开发一个独立的移动网站,会增加工作量如原生应用虽然可完全利用系统的API 和平台特性,但是在不同的平台需要独立开发 App,开发成本高而响应式Web App具有可访问不同终端浏览器一次开发多处分发迭代快等优点,并且响应式网站虽然只有一个布局,但是其能在所有类型的设备上工作,这样明显地减少了工作量降低了维护的成本

 响应式Web 设计的一些缺点如下:

需要一定的时间加载在响应式 web 设计中,用户需要下载一些并不十分必要的HTML /CSS,并且图片也没有真正调整适合设备屏幕的尺寸,这需要加倍时间进行加载
优化搜索引擎通过响应式Web 设计,确定搜索引擎关键字不是一项容易的任务相对于普通的桌面用户,移动用户使用不同的关键词,使响应式 Web 设计修改标题及其他事项都是很困难的
不支持老版本浏览器响应式Web 设计使用的是 CSS3,不幸的是大多数移动设备不兼容 CSS3 媒体查询,而且并不是所有的浏览器(IE)都支持 CSS3
并非适合所有的网站响应式Web 设计仍处于发展阶段,并不是所有的网站都适用如一些小游戏网站仅仅是网页采用了响应式Web设计,但游戏内容只能通过 PC 端打开的话,那么这时候就要考虑是否继续使用响应式 Web设计,还是修改游戏

 



 




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值