大家好，我是IT修真院北京分院学员汤金鑫，一枚正直纯洁善良的前端程序员。今天给大家带来的是自适应和响应式的区别。

1.背景介绍

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为 每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验， 而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

2.知识剖析

通俗得讲是：css根据屏幕宽度，自动调整网页div显示和布局，以适应不同尺寸屏幕优化浏览体验。 （根据屏幕宽度，自动调整布局）

优点：

1. 面对不同分辨率设备灵活性强

2. 能够快捷解决多设备显示适应问题

缺点：

1. 兼容各种设备工作量大，效率低下
2. 代码累赘，会出现隐藏无用的元素，加载时间加长
3. 其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果
4. 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

3.常见问题

1、屏幕尺寸多，很难做到一次编码，到处运行

目前，主流的大家用来访问网页的设备有：计算机(废话)，iPad，Android Pad(例如三星的)，智能手机。那么做一个网站，必须到这些设备上去测试和运行。普通的网站作坊很少有人会愿意花这么多的精力去测试一个网站。

2、视觉设计要求高、细节多

因为不能使用绝对定位，那么在设计的时候需要考虑可读性以及区域面积以及在不同的设备下的行为。这对一般的设计师来说简直是一场灾难。所以很少有出众的响应式网站出现。

3、前端实现难、跨技术合作

响应式设计出的稿子，当然还需要响应式的实现。响应式网站建设的基础就是HTML5, CSS3。小的建站公司，一般是没有钱去聘用精通HTML5和CSS3技术的高手的。最多是让程序员在写代码之前看2天书，然后就赶鸭子上架。这就导致了即使设计师设计出了很棒的模板，但是在实现了之后，怎么看怎么不舒服。

4、成本大

因为响应式设计需要对多个界面兼容、功能调试，导致整个制作过程需要UI设计师和前端工程师要不断磨合制作。而测试人员也要在不同的设备下对网站进行测试。我们做过调查。如果创建一个普通网站的成本是1，那么创建一个响应式模板的成本大概在2.5左右。由于小的建站公司的报价普遍比较低，利润空间肯定不支持他们把网站做成响应式的。

5、结论

总的来说，响应式网站设计比传统的网站设计复杂的多。它需要更多的人员参与到网站制作中来。它给美工、前端和后台开发团队之间的协作模式带来很多挑战。因此，响应式网站的建设成本往往是传统网站的2-3倍。

5.编码实战

见任务11代码

6.扩展思考

视觉设计要求高、细节多. 一堆问题那该怎么去做响应式呢

7.参考文献

阮一锋：http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

知乎：https://www.zhihu.com/question/20976405

8.更多思考

什么情况下应该使用响应式