基于html5响应式展会信息移动平台设计和实现

《基于html5响应式展会信息移动平台设计和实现》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、基于HTML5响应式展会信息移动平台设计和实现　　摘要：响应式网页设计是针对不同尺寸移动设备而诞生的技术，该技术很好地解决了由于不同尺寸设备引起的错误问题。在移动设备成为大众获取信息的主要渠道的背景下，结合展会信息服务，应用响应式网页设计技术，设计并实现了一个展会信息移动平台，该平台的构建为展会信息的传播和商家供求信息的发布提供了一条便利的途径，对促进中小企业的发展具有重大现实意义。关键词：响应式网页设计；移动设备；展会信息服务；信息平台中图分类号：TP315文献标志码：A文章编号：1006-8228（2014）03-24-030引言随着计算机网络技术的发展，9网络展会以其独特的优势表现出越

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

3、缺陷，注定了网络展会不可能替代实物展会[5]。而在现今信息泛滥的时代，信息正确的传播以及高效的获取才是展会行业发展的重中之重。人们对信息的获取逐渐依赖于日益发展的网络，但对于不同尺寸的终端，信息的传播方式有所不同。无论是传统的大屏幕桌面电脑，还是平板电脑或手机，可以从中获取的信息量是相当大的，那么人们选择获取信息的方式自然就取决于信息获取的便利程度。这就使得绝大部分人随身携带的手机自然而然地成为人们获取信息的首选工具。有数据显示从2008年到2013年，两大主流手机系统Android和ISO全球手机浏览器的使用量分别从1.7%和21.68%上升到30.94%和23.9%（图1）[6]。这说明

4、使用手机或平板电脑等移动设备浏览器获取信息已成为主流趋势。图12008年至2013年手机浏览器使用比例9根据以上的数据分析，本文以响应式网页设计技术为基础，详细介绍展会信息移动平台的设计与实现。响应式网页设计（RWD，ResponsiveWebDesign）这个术语是由伊桑·马科特（EthanMarcotte）提出的[7]。他在AListApart发表了一篇极具创新性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片和媒体查询）整合起来，并命名为响应式网页设计。也称为流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。这种网页设计的新方法使用百分比布局创建流动的弹性

5、界面，同时使用媒体查询来限制元素的变动范围。实现了针对任意设备对网页内容进行完美布局的一种实现机制[8]。在移动设备成为大众获取信息的主要渠道的背景下，本文主要结合展会信息服务，以响应式网页设计为基础，对展会信息移动平台进行设计与实现。1网站架构与功能根据DailyTech的统计，到2015年，移动互联网的用户数量将会超过桌面用户。除了智能手机之外，使用平板电脑上网的用户也越来越多[9]。在这种形势下，怎样让我们的网站尽量兼容各种类型的设备，并确保良好的用户体验，将会对网站的运营起到很大的推动作用。9本文所设计的网站通过使用响应式的设计开发方式，使网站页面随浏览设备的不同尺寸而自行响应，动态

6、地调整布局结构、元素规格样式，将内容按照不同的格式呈现给使用不同设备尺寸的用户；更好地进行代码重构，避免了为各种不同的移动终端开发不同版本页面的重复性工作，节约了开发时间和成本。图2不同尺寸屏幕的兼容方式响应式设计其实就是通过弹性网格布局、弹性图片和媒体查询的整合使用，达到更好地调整分辨率的问题。（如图2所示）不同的设备有着不同的分辨率、清晰度以及屏幕定向方式，怎样才能做到让一种设计方案兼容所有情况将显得特别重要。我们的处理方案是让页面尽量弹性化，让文字、图片的尺寸可以自动调整，做到无论用户切换设备的屏幕定向方式，还是从台式机屏幕转到平板电脑或手机上浏览，页面都会真正富有弹性。下面是我们设计

7、网站时使用HTML5和CSS3MediaQueries（层叠样式表媒介查询）相关技术来实现响应式Web设计的方案。1.1CSS3MediaQueries-打造弹性布局结构9实现自适应页面设计的关键之一是，使用CSS3根据分辨率宽度的变化来调整页面布局结构。CSS3支持CSS2.1所支持的所有媒体类型，例如screen、print、handheld等，同时还添加了很多涉及媒体类型的功能属性，包括max-widt