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

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

【2】Qayyum A. Responsive Web Design：An Ultimate Guide［ EB/OL］.［ 2015 -06 -01］. http：//smashinghub.com/responsive -web-design-an-ultimate-guide.html

【3】Marcotte E. Responsive Web Design［ EB/OL］.［2015-06-01］.http：//www.alistapart.com/articles/responsive-web-design/

【4】［美］加德纳，［美］格里格斯比. Head First Mobile Web 中文版［ M］. 林 琪，刘晓兵，等，译. 北京：中国电力出版社，2013：357-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]。媒体查询不仅可以向不同设备提供不同的样式，为不同类型的用户提供最佳的体验，还允许设计人员基于各自不同类型的设备属性（如：屏幕宽度、方向、 分辨率等）来确定目标样式。媒体查询支持IE9、 Firefox3.5、Safari3以及它们的更高版本，同时支持大部分智能手机和其他基于屏幕的设备。

（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设计，还是修改游戏。