响应式Web开发简介

1.什么是响应式Web开发

响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用手机、笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

Ethan Marcotte曾经在A List Apart发表过一篇文章“Responsive Web Design”，文中援引了响应式建筑设计的概念：

》》最近出现了一门新兴的学科——“响应式建筑(responsive architecture)”——提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产“智能玻璃”：当室内人数达到一定的阀值时，这种玻璃可以自动变为不透明，确保隐私。

》》显而易见，将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。并且，随着科技的不断进步， 越来越多的人使用小屏幕设备上网，针对不同屏幕的设备进行网页制作成本非常大，这时，响应式Web设计应运而生。响应式Web设计（Responsive Web Design）是由Ethan Marcotte 在2010年提出的，他将媒体查询、栅格布局和弹性图片合并称为响应式Web设计。
》》显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。

在响应式开发的大潮中，HTML5+CSS3的相互配合和支持占据十分重要的地位

HTML5针对于之前的html技术来说，拥有八大革新:
1.离线&存储（Offline & Storage）：HTML5 App Cache，Local Storage，Indexed DB和File API使Web应用程序更加迅速，并提供了离线使用的能力。
2.语义网（Semantics）：提供了一组丰富的语义化标签。
3.多媒体（Multimedia）：音频视频能力的增强是HTML5的最大突破！
4.通信（Connectivity）：增强了通信能力，意味着增强了聊天程序的实时性和网络游戏的顺畅性。
5.设备访问（Device Access）：增强了设备感知能力使得Web应用在电脑、pad、手机上均能使用。
6.呈现（CSS3）：CSS3可以很高效的实现页面特效，并不会影响页面的语义和性能。
7.性能和集成（Performance & Integration）：Web Worker让浏览器可以多线程处理后台任务而不阻塞用户界面渲染。同时，性能检测工具方便评估程序性能
8.图形和特效（3D, Graphics & Effects）：Canvas、SVG和WebGL等功能使得图形渲染更高效，页面效果更加炫酷。

HTML5技术秉承“简单之上，尽可能简化”的原则，对以下做了改进:
1.简化DOCTYPE和字符集声明；
2.强化HTML5 API，让页面设计更加简单；
3.以浏览器的原生能力代替复杂的JavaScript代码；
4.精确定义的错误恢复机制，如果页面中有错误，也不会影响整个页面的显示。

》》同时HTML5给用户良好的用户体验
HTML5规范以“用户至上”为宗旨。也就是说在遇到冲突时，规范的优先级如下：
用户>页面作者>实现者（浏览器）>规范开发者（W3C/WHATWG）
纯理论。
》》另外，HTML5还引入了一种新的安全模型来保证HTML5足够安全。
》》各大浏览器对 HTML5的支持正在不断完善，目前Chrome对 HTML5的支持最好，Firefox、Opera、Safari、IE10 对HTML5也有很好的支持。

相关链接：http://www.woshipm.com/pd/1463.html