响应式Web开发的模式分析.docVIP

响应式Web开发的模式分析 　　摘要：随着移动互联网和移动通信设备的发展，响应式Web设计这种很早就出现但不被人注意的设计理念逐渐在这2年中发展起来。可以预见在今后的Web前端开发中响应式开发技术将成为必然的趋势。本文对此技术做一简单综述，介绍了响应式开发的开发流程和设计方式，并对某些具体实现给以简单阐述。 　　关键词：响应式Web；CSS；流式布局 　　中图分类号：TP393.0 　　文献标识码：A 　　DOI：10.3969/j.issn.1003-6970.2015.06.017 　　本文著录格式：苏奎，董默，张彦超，响应式Web开发模式分析U].软件，2015，36（6）：92-96 　　AReviewofResponsiveWebDevelopmentPatternsSUKui，DONGMo，ZHANGYan-chao 　　[Abstract]：WiththedevelopmentofmobileInternetandmobilecommunicationdevices，responsiveWebdesignthathasbeenpresentedbutunnoticedbywebdesignergraduallydevelopedinthesetwoyears.Itcanbepredictedthatre-sponsivewebdesignwillbecometheinevitabletrendinfuture.Thispapermakesasimpleoverviewonthistechnology，introducesthedevelopmentflowanddesignmethodofresponsiveweb，andstatessomeconcreterealization 　　[Keywords]：Responsiveweb；CSS；Fluidlayout 　　0引言 　　在科技飞速更新大趋势下，人们常用的计算机互联网设备已不仅限于一台台式电脑，显示器和一根网线。各种尺寸，类型的笔记本电脑，平板设备，智能手机，智能手表，智能电视等带CPU和存储功能的各类微型计算机设备正在迅速崛起。随着3G，4G网络的不断普及，目前国内PC端网站的日均覆盖人数基本保持在2.3亿人次上下，已趋于停滞。而移动端App的日均覆盖人数已接近2亿，并呈现持续上涨趋势，大量数据调查表明，移动互联网行业时代已经到来，越来越多的人开始习惯用移动设备代替笔记本和台式机完成日常工作和生活需要[1]，用户的注意力从PC向移动端转移的态势已不可逆转，人们在这些各种尺寸的智能设备上浏览网页的用户体验需求便必然提高。 　　传统的Web前端开发都是为一种设备提供的，比如台式电脑。在设计时每个Web页面通常都是为每个元素的宽度固定尺寸。这样设计的网页在不同大小的屏幕上，会有不同的显示效果，当一个用户使用桌面PC和使用移动互联设备访问一个网站时，有很大的差异，会感觉不适应[2]。为了解决这些问题，为不同的设备制作不同的网页是目前国内很多网站的做法，例如可以专门为移动设备提供一个mobile版本，以保证网页在不同设备上的显示效果，但是维护成本却增加了，同时也大大增加了架构设计的复杂度[3]。随着目前不同尺寸设备的增多，我们不可能为每种设备都去单独开发一套Web界面。 　　1响应式页面为了应对引言中有关问题，2010年，EthanMarcotte提m了“响应式Web设计（ResponsiveWebDesign）”的概念[4]。该文借鉴了响应式建筑设计的思路：现出现了一门新兴的学科一一”响应式架构（responsivear-chitecture）”，物理空间应该可以根据存在于其中的人的情况进行响应。同样，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。尽管响应式Web在2010年被提出，这个技术真正开始被国内开发者关注则是近2年随着HTML5和CSS3的出现刚刚开始。 　　2响应式Web开发流程 　　目前最为常用的Web开发模型都是基于瀑布模式或瀑布模式的修改。这类模式通常可以简化为5个步骤：计划分析、总体架构设计、具体开发、精确测试、完善修改。 　　2.1计划分析与总体设计 　　传统的开发过程里的框架图主要由布局和组件构成。它们通常被设定为一个特定的尺寸（通常基于像素，比如wrapper通常是960px的显示器宽度），并且几乎没有调整的余地。这些框架给出了具体的网格布局的尺寸大小，在某个特定屏幕分辨率下，它们通常能够获取最佳的浏览效果，但在更大或更小的分辨率下，网站可能产生横向滚动条，或在页面两侧产生空白区域[5]。不一样的屏幕会导致布局的改变，最后可能导致导航条菜单无法使