基于HTML5的响应式展会信息移动平台设计与实现

2014-04-29范宇超廖剑强邓秀勤林楚泉

计算机时代 2014年3期

范宇超　廖剑强　邓秀勤　林楚泉

摘要：响应式网页设计是针对不同尺寸移动设备而诞生的技术，该技术很好地解决了由于不同尺寸设备引起的错误问题。在移动设备成为大众获取信息的主要渠道的背景下，结合展会信息服务，应用响应式网页设计技术，设计并实现了一个展会信息移动平台，该平台的构建为展会信息的传播和商家供求信息的发布提供了一条便利的途径，对促进中小企业的发展具有重大现实意义。

关键词：响应式网页设计；移动设备；展会信息服务；信息平台

中图分类号：TP315 文献标志码：A 文章编号：1006-8228（2014）03-24-03

0 引言

随着计算机网络技术的发展，网络展会以其独特的优势表现出越来越强的独立性，尤其是对一些以外贸客户为主的展览来说，网络会展有着无限的潜力[1]。网络展会能为用户提供更多的信息服务、匹配服务以及交易服务等[2]，并且有影响范围广，信息传播量大的特点，且信息传递快捷、成本比较低廉，所以受到越来越多的用户的亲睐[3]。无论是对于要求低成本、高效率的主办方，还是对于需预期了解目标市场以及方便资源整合的参展商，或者是对于要求方便快捷的采购商，网上会展的出现都很好地解决了传统实物会展因场地、资金等因素出现的问题，从而大大促进了会展行业的发展[4]。

虽然网络展会的经济性给企业带来了可观的经济利益，对传统实物展会构成了巨大的冲击，但是由于实物展会的独特性和网络展会的缺陷，注定了网络展会不可能替代实物展会[5]。而在现今信息泛滥的时代，信息正确的传播以及高效的获取才是展会行业发展的重中之重。

人们对信息的获取逐渐依赖于日益发展的网络，但对于不同尺寸的终端，信息的传播方式有所不同。无论是传统的大屏幕桌面电脑，还是平板电脑或手机，可以从中获取的信息量是相当大的，那么人们选择获取信息的方式自然就取决于信息获取的便利程度。这就使得绝大部分人随身携带的手机自然而然地成为人们获取信息的首选工具。

有数据显示从2008年到2013年，两大主流手机系统Android和ISO全球手机浏览器的使用量分别从1.7%和21.68%上升到30.94%和23.9%（图1）[6]。这说明使用手机或平板电脑等移动设备浏览器获取信息已成为主流趋势。

图1 2008年至2013年手机浏览器使用比例

根据以上的数据分析，本文以响应式网页设计技术为基础，详细介绍展会信息移动平台的设计与实现。

响应式网页设计（RWD， Responsive Web Design）这个术语是由伊桑·马科特（Ethan Marcotte）提出的[7]。他在A List Apart发表了一篇极具创新性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片和媒体查询）整合起来，并命名为响应式网页设计。也称为流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。

这种网页设计的新方法使用百分比布局创建流动的弹性界面，同时使用媒体查询来限制元素的变动范围。实现了针对任意设备对网页内容进行完美布局的一种实现机制[8]。

在移动设备成为大众获取信息的主要渠道的背景下，本文主要结合展会信息服务，以响应式网页设计为基础，对展会信息移动平台进行设计与实现。

1 网站架构与功能

根据DailyTech的统计，到2015年，移动互联网的用户数量将会超过桌面用户。除了智能手机之外，使用平板电脑上网的用户也越来越多[9]。在这种形势下，怎样让我们的网站尽量兼容各种类型的设备，并确保良好的用户体验，将会对网站的运营起到很大的推动作用。

本文所设计的网站通过使用响应式的设计开发方式，使网站页面随浏览设备的不同尺寸而自行响应，动态地调整布局结构、元素规格样式，将内容按照不同的格式呈现给使用不同设备尺寸的用户；更好地进行代码重构，避免了为各种不同的移动终端开发不同版本页面的重复性工作，节约了开发时间和成本。

图2 不同尺寸屏幕的兼容方式

响应式设计其实就是通过弹性网格布局、弹性图片和媒体查询的整合使用，达到更好地调整分辨率的问题。（如图2所示）不同的设备有着不同的分辨率、清晰度以及屏幕定向方式，怎样才能做到让一种设计方案兼容所有情况将显得特别重要。我们的处理方案是让页面尽量弹性化，让文字、图片的尺寸可以自动调整，做到无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到平板电脑或手机上浏览，页面都会真正富有弹性。下面是我们设计网站时使用HTML5和CSS3 Media Queries（层叠样式表媒介查询）相关技术来实现响应式Web设计的方案。

1.1 CSS3 Media Queries-打造弹性布局结构

实现自适应页面设计的关键之一是，使用CSS3根据分辨率宽度的变化来调整页面布局结构。CSS3支持CSS2.1所支持的所有媒体类型，例如screen、print、handheld等，同时还添加了很多涉及媒体类型的功能属性，包括max-width（最大宽度）、device-width（设备宽度）、orientation（屏幕定向，横屏或竖屏）等。现在的主流设备，如iPad或Android相关设备，都可以完美地支持这些属性。

下面的几个例子，将展示如何使用CSS3 Media Queries实现不同的样式表。

/*浏览器或屏幕宽度超过500px时使用*/

@media screen and （min-width： 500px） {

.myClass {

width： 30%；

float： right；

}

/*浏览器或屏幕宽度小于500px时使用 */

@media screen and （max-width： 500px）

{ .otherClass

{ clear： both；

font-size： 1em；

}

将上述属性组合使用，可以用来锁定某个屏幕尺寸范围：

/*浏览器窗口或屏幕宽度在800px至1200px之间时使用 */

@media screen and （min-width： 800px） and （max-width：

1200px） {

.someClass

{ background： #cc0000；

width： 30%；

float： right；

}

1.2 JavaScript-提高兼容性

JavaScript也是重要的工具之一，特别是当某些旧设备无法完美支持CSS3的Media Queries时，JavaScript可以完美实现兼容。专门的JS库（css3-mediaqueries.js）可帮助旧浏览器（IE 5+，Firefox 1+，Safari 2等）支持CSS3的Media Queries。对于那些尚不支持Media Queries的浏览器，本文主要是通过在页面中调用css3-mediaqueries.js来解决兼容性问题。

<！--[if lt IE 9]>

<！[endif]-->

下面的代码演示了怎样使用简单的几行jQuery代码来检测浏览器宽度，并为不同的情况调用不同的样式表：

可以看出，借助JavaScript，我们可以实现更多的变化，从而使我们设计的网页更加动态化地实现兼容性，提高页面弹性。

1.3 HTML5-进一步渲染页面

在HTML5发布之前，让表单风格与浏览器保持一致是很困难的事情，而且更重要的是需要Javascript来验证表单输入，复杂的正则表达式成为了开发者的一大难题，好消息是HTML5基本上解决了这些常见的问题，让开发人员开发效率迅速提高，缩短开发周期。HTML5代码主要用于后台登录、展会资讯管理，当我们要验证帐号密码、添加展会信息到数据库，或者更改展会信息时，表单的使用是不可缺少的。

后台登录界面的显示，主要利用了placeholder和required两个属性。这两个属性使用起来非常方便，可以实现丰富的功能。登录界面通常需要在表单域显示占位符文字，这时只需要在input元素加入placeholder属性，其属性值就会默认显示为占位文字，当输入框获得焦点时文字就会自动消失，当输入框失去焦点，但又没有输入任何值时，占位符会再次显示。Required属性，顾名思义，表示这个属性是必须要赋值的，在input元素里面追加此属性，则表明该表单域为必须填写。代码如下：

"请输入用户名" required>

仅仅这一行代码，就可以代替复杂的JS代码，简洁方便。用chrome浏览器测试如图3所示。

2 结束语

本文基于对响应式网页设计的应用，通过对CSS3样式的设计，构造了基于不同尺寸屏幕的样式表，并利用Javascrip技术解决旧设备的兼容性问题，HTML5编写表单也简单高效地解决了后台登录以及展会资讯管理中存在的问题。

图3 登录界面测试

本文通过运用响应式网页设计思想实现了网页模块在不同尺寸设备下良好的显示效果，进一步增强了网站的兼容性和互动性，很好地体现出响应式网站相对于传统网页的优越性。但就现实来说，传统网页仍占较大比例，响应式技术还没有被广泛应用，相信在今后移动互联网浪潮的推动下，响应式技术也会得到迅速发展与普及。

参考文献：

[1] 中国国际贸易促进委员会展会新闻http：//www.ccpit.org/

Contents/Channel_1071/2007/0801/55560/content_55560.htm

[2] 蔡瑞初，赵骏凯，邓强等.网络会展电子商务功能分析——以“网上广

交会”网站分析为例[J].电脑知识与技术，2011.7（24）.

[3] 钱小轮.从“2010上海网上世博会”看网络技术对当代会展业发展的