响应式网页设计

名词解释

1.什么是响应式网页设计

响应式网页设计或称自适应网页设计、回应式网页设计、对应式网页设计。 是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。

　　Ethan Marcotte在他在A List Apart的文章(http://alistapart.com/artices/responsive-web-design)中发明了术语 Responsive Web Design (RWD)。他在他2011年关于这个主题所写的简短的书中描述了响应式网页设计的理论和实践。响应式设计被net杂志列为2012年顶级网页设计趋势的第二名 (渐进增强是第一名)。

2.为什么需要响应式网页设计

随着手机浏览器的市场比重上升甚至过半，大屏幕设备如4K电视的日趋增长，上网设备屏幕之间的差距也达到了前所未有之大。响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

1.性能

移动设备外部的样式表和脚本会严重降低站点的性能，不会被缓存，虽然隐藏了内容，但是标签和css仍会被下载。

2.使用环境

主要用户的使用环境

3.内容协商

根据内容的重要性去重新组织或者重构你的站点的内容。

4.时间投入

响应式网站需要花费更多的时间，如果项目时间很紧的话，要好好考虑一下。但是多花费的时间会在维护成本中得到弥补。

5.支持

浏览器支持，渐进增强和优雅降级

3.响应式网页设计例子： 

www.producthunt.com

反例：

www.shanzhuoboshi.com

4.响应式网页设计运用的科技

1.CSS3媒体查询 Media Queries

能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果

2.弹性网格和布局

能将固定像素大小转换为弹性比例大小

3.响应式图片

根据用户的设备和使用场景提供合适大小的图片

4.响应式字体

5.响应式网页设计前后端

Web前端：

　　1)精通HTML，能够书写语义合理，结构清晰，易维护的HTML结构。

　　2)精通CSS，能够还原视觉设计，并兼容业界承认的主流浏览器。

　　3)熟悉JavaScript，了解ECMAScript基础内容，掌握1~2种js框架，如JQuery

　　4)对常见的浏览器兼容问题有清晰的理解，并有可靠的解决方案。

　　5)对性能有一定的要求，了解yahoo的性能优化建议，并可以在项目中有效实施。

　　6)......

　　Web后端：

　　1)精通jsp，servlet，javabean，JMS，EJB，Jdbc，Flex开发，或者对相关的工具、类库以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，对Web开发的模式有较深的理解

　　2)练使用oracle、sqlserver、mysql等常用的数据库系统，对数据库有较强的设计能力

　　3)熟悉maven项目配置管理工具，熟悉tomcat、jboss等应用服务器，同时对在高并发处理情况下的负载调优有相关经验者优先考虑

　　4)精通面向对象分析和设计技术，包括设计模式、UML建模等

　　5)熟悉网络编程，具有设计和开发对外API接口经验和能力，同时具备跨平台的API规范设计以及API高效调用设计能力

响应式设计和前后端的关系

响应式设计需要后端代码来实现完成前端页面产出的对于不同屏幕大小的适应性