响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
最近几年来,越来越多的智能移动设备（ mobile, tablet device ）加入到互联网中来，移动互联网不再是独立的小网络了，而是成为了 Internet 的重要组成部分。响应式网络设计 （ RWD / AWD）的出现，目的是为移动设备提供更好的体验，并且整合从桌面到手机的各种屏幕尺寸和分辨率，用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。
什么是响应式布局设计？
响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。
响应式页面的前端展现大约可以分为2种:第一种，纯粹的响应式页面，屏幕尺寸涵盖从PC→手机屏幕的全尺寸就是我们传统的响应式页面，不管用户是什么设备，我都给他提供一套CSS样式，这套CSS样式里面有PC版，pad版，手机版。这种是目前国外灰常流行的响应式页面，因为国外的浏览器市场情况是，chrome/firefox等高版本浏览已经占据主流，IE6,7等已经越来越少，基本可以不再提供支持。第二种，残疾版响应式页面，PC是独立的一套独立的页面，移动设备是另一套独立的页面。就是现在国内这种残疾型的响应式页面，由于我们海量的用户还在使用IE6这种高(keng)端(die)产品，导致我们不得不在PC页面上对IE系列有良好的支持，这就代表以CSS3和html5等新特性不能在PC页面上展现。与此同时，由于国内三大运营商给(nao)力(can)的网络速度，导致用户要是访问传统的响应式页面会下载较多的资源，用户打开网页的速度会比较慢。所以，第二种残疾版响应式页面就有了存在的价值。
静态、自适应、流式、响应式四种网页布局有什么区别？
静态布局（Static Layout）
采用固定宽度，即传统Web设计，对于PC设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；对于移动设备，单独设计一个布局，使用不同的域名如wap.或m.。
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
自适应布局（Adaptive Layout）
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。你可以把自适应布局看作是静态布局的一个系列。
响应式布局（Responsive Layout）
分别为不同的屏幕分辨率定义布局，首先检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式布局的优点与缺点：
优点：1.跨平台。在手机，pad，电脑上均有不俗的表现。2.节省人力开发成本。不再需要有人特地维护PC页面，移动页面。3.表现力一致在不同的平台上看到的东西都是基本一致的，会让感觉体验良好。
缺点：1. 页面加载的代码多了，导致文件增大了，影响加载速度。为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码，这影响了页面加载速度。尤其是js代码，若处理不好，在配置低的机子上浏览会很卡。2. 在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辩率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度。3. 对 大型门户或电商网站来说，响应式设计目前确实不太适合。因为响应式设计的基本原则是不会因设备不同而给予用户不同的内容（比如在低分辩率设备上删减某些内 容），而大型门户或电商网站的单页内容非常多，当缩减到低分辨率设备上，又要保证内容全部可浏览时，必然导致页面拉长，浏览困难度增加。4. 对于同一用户，在不同设备浏览响应式网页时，可能会感到不适应。虽然优秀的响应式设计会尽量在不同设备呈现相同数量及质量的内容，但对于同一用户，毕竟在不同设备看到的网页排版发生了改变，可能带来不适应。
为不同的设备提供优化的浏览体验，这个肯定是网站开发所追求的目标，也是网站技术发展的趋势。但响应式设计只是实现这一目标的其中一个手段，只适用于某些类型的网站，在以后的时间里，必然会出现更优异更强大的布局方式来完成目前难以达到的目标。
原文：http://www.cnblogs.com/yujiangong/p/5656478.html