**********************************
根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整[3]。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
1.2 国内外发展现状和趋势
响应式设计的网站能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。当然专门为手机或者平板电脑设计的网站或者app应用也能满足部分访问者的需求，但是据调查数据显示，常用的终端移动设备有230多种不同的屏幕尺寸，我们不可能为所有这些常用的230多种屏幕尺寸都设计一个独有的网站或者app应用。所以响应式设计此时体现出了它的价值所在。
有调查结果显示，移动设备正在逐渐超过PC设备，如果数据属实那么毋庸置疑，以后我们的网页设计就应该实现响应式布局。设想一个在移动终端都不能正常显示的网页能给公司企业带来的大概也只有负面的影响，所以为了能够使所有利用移动设备访问网站的用户都能有最优最好的体验，响应式设计绝对是最好的一种选择和趋势。
Ethan Marcotte曾经在A List Apart发表过一篇文章\，文中援引了响应式建筑设计的概念：现出现了一门新兴的学科\响应式架构(responsive architecture)\提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产\智能玻璃\：当室内人数达到一定的阈值时，这种玻璃可以自动变为不透明，确保隐私[4]。
将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。
2
**********************************
显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式[5]。
响应式设计在2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。
1.3 本文工作和论文结构 1.3.1 本文工作
本文主要分析了符合企业品牌宣传和产品展示需要的响应式网站的开发过程。阐述了一个基于J2EE基础之上的、应用HTML5，JSP等语言开发的B/S结构的高校办公自动化系统的设计与实现过程。具体工作如下：
⑴ 介绍本系统的开发背景和本系统的国内外发展现状；
⑵ 论述了开发本响应式网站平台开发过程中的理论支持、技术基础和实现的关键技术；
⑶ 对本系统进行了需求分析和功能的设计，确定系统的体系结构； ⑷ 以系统设计原则为标准，完成系统的前端页面、后台管理系统和数据库内容的具体实现过程。
1.3.2 论文结构
全文共分为六章，具体工作如下：
第一章 绪论。简单阐述了本系统的开发背景和国内外发展现状。 第二章系统技术理论基础。主要介绍开发系统的过程中用到的技术和理论。 第三章 系统需求分析。主要对响应式网站的基本需求进行分析、建模。 第四章 系统设计与实现。按照系统设计原则，对系统前端、后台和数据库进行设计，以及系统的前端页面、后台管理系统和数据库内容的具体实现过程。
3
**********************************
第五章 系统测试。对系统的兼容性和功能性进行测试。
第六章 总结和展望。对当前系统在设计和实现的过程当中遇到的问题和针对这些问题给出的解决的方案做个概要的经验总结，以便今后对类似系统的开发提出良好的可行性的建议。对当前系统的不足加以总结，在今后系统的升级或类似系统的开发时做出修改和调整。
4
**********************************
2. 系统技术理论基础
2.1 HTML5简介
HTML5是HTML下一个主要的修订版本，现在仍处于发展阶段。目标是取代1999年所制定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。HTML5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务RIA，如Adobe Flash、Microsoft Silverlight，与Oracle Java FX的需求，并且提供更多能有效增强网络应用的标准集[1]。HTML5是新兴的Web开发技术，其拥有良好的语义化标签，搭配最新CSS3可以展现出无与伦比的显示效果。支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力[6]。
HTML5具有以下特性： 1. 语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
2. 本地存储特性（Class: OFFLINE & STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
3. 设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
5
**********************************
4. 连接特性（Class: CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，这两个特性能够帮助我们Server-Sent Event和WebSockets就是其中的两个特性，实现服务器将数据“推送”到客户端的功能。
5. 网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。
6. 三维、图形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、用户会惊叹于在浏览器中，Canvas、WebGL及CSS3的3D功能，所呈现的惊人视觉效果。
7. 性能与集成特性（Class: Performance & Integration）
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。
8. CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性[7]。
HTML5具有以下优势： 1.网络标准
HTML5 本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。换句话 说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。
2.多设备、跨平台
用 HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中 心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google
6