支持移动终端的响应式Web设计与研究

摘要：随着智能手机为代表移动终端设备的普及和发展，提高基于不同设备的交互体验成了交互系统是否被认可的关键。本文通过采用基于响应式Web的自适应系统设计，通过在系统的表示层甑别不同设备类型，针对性提供界面需求，提高了用户体验。

关键词：响应式Web；交互；移动终端

2012年被称为智能手机年，根据最近一份调查显示，在美国的智能手机覆盖率已达50%，也正因为此当前确实是提升移动终端用户体验的大好时机。移动互联体系中，Web交互系统是作为人与人、人与设备之间沟通的桥梁存在，随着当前移动智能设备的普及，原有的交互系统面临挑战。根据有关机构的统讯预计到2015年，移动互联网的用户数量将会超过桌面用户。除了智能手机之外，使用平板电脑甚至是电视机进行上网的用户也在持续增加。在这种形势下，怎样让我们的网站尽量兼容各种类型的设备，并确保优良的用户体验，这将是越来越重要的问题。本文尝试通过响应式的设计开发方式，构建一个使系统的页面随接入设备的不同而自行响应，动态的调整布局结构、元素规格样式，将相同的内容以不同的格式呈现给不同设备的用户的系统。通过设计这样的交互系统，我们就可以达到利用同一套代码，使网站内容在Pc、平板电脑以及智能手机浏览器上都能正常的显示的目的。

1、基于响应式Web系统的设计流程

基于响应式Web的交互系统的设计基本流程为以下三步：第一，确定需要兼容的设备类型、屏幕尺寸等硬件信息，以及交互的信息流需求信息等；第二，根据第一步的硬件需求尺寸制作线框模型，根据交互信息需求设计功能模块；第三，进行uI效果设计，进行交互功能的定义及详细设计；最后，通过前端程序设计实现。

2、响应式Web的基本原理

基于响应式Web设计（Responsive Web design）的理念是，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS mediaquery的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。简而言之，我们的Web设计应该做到根据不同设备环境自动响应及调整，不过，我们无法像其它工程领域一样使用类似于运动传感器或是机器人技术去感知用户，响应式Web设计更多需要的是抽象思维。目前，液态布局、帮助页面重新格式化的media queries和脚本等技术已经开始应用，但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。

3、响应式Web实现的关键

构建响应式Web的有些关键技术与关键环节，其中应用最关键的技术有：HTML5技术、CSS3 Media Query技术，最重要的环节部分为流体布局（fluid grid）、流体图片（1iquid image）、以及媒体查询（media query）。

3.1 HTML5与CSS3技术介绍

HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能。其次，追加了本地数据库等Web应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internetapplication，RIA），如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。

CSS即层叠样式表（Cascading Stylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

3.2 流体布局（fluid grid）

流体布局其实就是在我们实现PC终端的页面基础上，将一些元素的宽高由原来的固定多少像素（px）调整为百分比（%）或字体比例（em）（或布局方面的margin、padding、left、top等以px为单位的值），这也是当前实现响应式布局的两种主要实现方法。第一种用百分比（%），就是以该元素的父容器的宽高为100%，其他元素的宽高相对于其父容器的比例，只要将具体的像素值相对于他的父容器的一个百分比折算即可。当然这种方法的换算有点复杂，因为很多相对的宽高折算的百分比系数是带小数的，所以这时候可能要你有足够的耐心才能实现。下例为一个实现例子代码：

@media screen and（max-width：400px）{

.figure，

ii#f-mycroft{

margin-right：3.317535545023696682%；/*21px/633px*/

width：48.341232227488151658%；/*306px/633px*/}

上面代码中通过百分比定义容器的长宽高，其实还可以采用另外一种使用字号比例（em）去实现控制的流体布局方法，其实方法是跟上面一样的，只不过我们将%换成Yem，这种方法就是某元素具体的宽高（px）在当前基准字号（font-size）下折算出多少个em。一个在480分辨率下宽高为64px*64px的元素，其父容器的字号（font-size）为20px，那么它折算成em为单位就是3.2em*3.2em。当其父容器字号基准根据不同的分辨率变化的时候，该元素宽高也能根据这个字号基准成比例的缩放，就能实现响应式变化。

3.3 流体图片（Iiquid image）

在目前所了解的很多资料和实际应用中，在图片处理上，如果要使图片能根据分辨率来适应，而且还不失真，是比较困难的。但其实设计中我们其实不用考虑的那么复杂，我们要做的只是让图片能根据不同分辨率自适应罢了，我们不管图片会不会因为被拉伸而失真，因为真的遇到这样的情况，我们可以考虑在不同分辨率下使用不同的图片，这样就简单多了。所以让图片尺寸自适应，我们只要不给图片设定具体的宽高尺寸，只要在样式中给该图片一个width：100%，这样图片就能根据它父容器的尺寸自动调整了。

3.4 媒体查询（media query）

响应式页面的一个关键是实现媒体查询，即能够根据不同的分辨率去调整一些不同的样式。通过这样的媒体查询结构，我们可以设定在不同分辨率下选用不同的样式来调整响应式页面。像前面第二点流体布局上，我们使用百分比或字号比例去实现流体布局的时候，第一种方法是可以不用媒体查询直接实现流体布局的，就是元素的宽高能自适应不同分辨率屏幕。但第二种方法用字号比例（em）去实现流体布局的时候，我们就必须要结合媒体查询了，因为我们的字号比例是根据基准字号来实现的，就是说在基准字号一定的情况下，该元素的大小就是固定的，而我们要实现该元素尺寸自适应，就只能通过调整基准字号来实现了。

通过媒体查询，我们可以让在基准字号font-size在不同分辨率下不一样，这样其子元素相对于该字号的比例em算出来的像素px就不一样了，这样就能实现响应式了。所以我们兼容不同的分辨率的时候，可以先在某个分辨率下，实现完美的重构，然后将所有元素具体的尺寸（px）折算为em（根据父容器的font-size），然后再通过媒体查询，调整不同分辨率下的基准字号font-size就能实现具体的响应式了。在具体的项目过程中，采用媒体查询主要是调整不同分辨率下的基准字号的大小，具体如下面的代码所示：

body，section，button，hl，p，.layer，.downall_btn，.introduce，.playlist，.recom_picbox{font-size：20px；}

/*for 800 px width screen*/

@media only screen and （max-device-width：800px），only screen and（max-width：800px）{

body，section，button，h1，p，.layer，.downall_btn，.introduce，.playlist，.recom_picbox{font-size：33.34px：}

}

/*for 720 px width screen*/

@media only screen and （max-device-width：720px），only screen and（max-width：720px）{

body，section，button，hl，p，.1ayer，.downall_btn，.introduce，.playlist，.recom_picbox{font-size：30px；}

}

通过媒体查询的功能是根据不同的分辨率适配不同的样式，我们可以通过上面的做法是实现流体布局，还可以通过媒体查询来细调具体的页面在不同分辨率下的不同表现形式。

4、结束语

相对于传统的Web应用实现方式，响应式Web实现有以下几个优点：

4.1 对用户友好

很显然，响应式Web设计可以向用户提供友好的Web界面，因为它可以适应几乎所有设备的屏幕。现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站—直保持联系，而这正是开发响应式网站的目的所在。在响应式网站的帮助下，你的应用可以很好支持移动智能终端用户，你需要做的只是创建一个移动应用。

4.2 积累分享

响应式Web设计可以让你（作为网站的拥有者）通过单一的URL地址收集所有的社交分享链接。你可以为创建更好、更友好的网站而做出积极贡献。

4.3 无重定向和更少维护

响应式Web设计最大的优点之一是，你不必在乎任何重定向，它包含无用户定向。所以当你很少负责解决重定向及定向用户时，这是一件很棒的事情。开发一个独立的移动网站，会增加你的工作负担。实际上你就拥有了两个独立网站。如果你有一个响应式网站，维护的成本将会很小，因为它只有一个布局，且可工作在所有类型的设备上，而这可以明显地减少你的工作量。

当然基于响应式Web应用还存在一些诸如加载时间稍慢的问题，它并非适合所有类型的网站，本文也中的实现也具有一定的局限性，需要以后不断结合新技术进行改进。