Responsive design 和 Adaptive design 的区别？

由于 responsive design 下的回答实在太少，看不下去

半夜试答一下这个问题

说在前面，这个话题即使是在英文圈里也是众说纷纭，所以可能有很多不同的理解。但其实未必要纠结于文字，只要使用最适合自己目标用户的策略就好。

(图片来自

)

以下 Responsive design ＝ RWD，Adaptive design ＝ AWD

先说共同点，两者都是因为越来越多的 移动设备（ mobile, tablet device ）加入到互联网中来而出现的为移动设备提供更好的体验的技术。用技术来使网页适应从小到大（现在到超大）的不同分辨率的屏幕。有人说，RWD 是 AWD 包含的一个子集。

RWD：Ethan Marcote 的文章是大家认为 RWD 的起源。他提出的 RWD 是采用 CSS 的 media query 技术，配合流体布局（ fluid grids ）和同样可以自适应的图片/视频等资源素材。以上所说，都是通过 HTML 和 CSS 就能完成的。一般来说，RWD 倾向于只改变元素的外观布局，而不大幅度改变内容。Jeffrey Zeldman 总结说，我们就把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术吧。

AWD：Adaptive Design 是 Aaron Gustafson 的书的标题。他认为 AWD 在包括 RWD 的 CSS media query 技术以外，也要用 Javascript 来操作 HTML 来更适应移动设备的能力。AWD 有可能会针对移动端用户减去内容，减去功能。AWD 可以在服务器端就进行优化，把优化过的内容送到终端上。AWD 通常会牵扯到另外一个词 “progressive enhancement” 。

progressive enhancement：从针对最低端的，最低分辨率的设备的设计做起，逐步逐步为更高阶的设备增加功能和效果的做法。（换个角度说，也就是相当于为移动设备减去功能）

RWD 和 AWD 在断点（ break point ）的区别：

RWD 采用流体＋断点，在断点之间，页面依然会随窗口大小自动缩放（通过 fluid grid ），直到遇到断点改变界面样式。相对的，AWD 只在针对几种分辨率（如1280，800，640，320px）进行优化，在断点之间的自动过渡比较少。

还有一种说法：

RWD 一般来说需要在网页设计初期就开始（通常采用 mobile first 策略），所以旧的网站要做 RWD 很可能要完全重建。而 AWD 则采用保留现有桌面网站（ desktop version ）而对于更小的分辨率做针对性的优化（适应），这点对于很多老的网站来说很重要，因为重构成本太大。

另外，对于 mobile 用户的优化到底应该怎么做，有两方的说法各不相让。有人说，不应该因为用户使用的是 mobile device 就删去内容，限制他们的功能，应该平等对待。也有人说，正因为是移动设备，有其流量，性能，网速的局限性，用移动设备登录网站的目的也会更有针对性，要为用户精简文字，精简最常用的功能放在首页，服务器端的优化才是真的针对 mobile 的优化。

最后：

在网上的各种说法里确实是有很多相互干扰相互矛盾的地方，但是其实技术都是摆在那里的。其实可以认为，AWD 在针对布局的优化中，可以采用 RWD 的策略，但是AWD 着力于更多其他的 JS 或者服务器上的优化，来强化移动端体验。

不用纠结于词汇，根据网站功能复杂度，预算和资源等，选择要使用的技术，从客户端的展现，到 JS，到服务器的优化等等。

************************************************************************

参考文章：

最近正好看到了这块内容：

如上所说，这两种方式都是为了解决网页在不同屏幕尺寸的设备上展示的问题。我觉得这只是两种不同的开发形式，二者的差别从开发的角度看更容易理解。

Responsive design (响应式设计)：建立一个网页，通过CSS Media Queries，Content－Based Breakpoint（基于内容的断点）等技术来改变网页的大小以适应不同分辨率的屏幕。

Adaptive design (自适应设计)：为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。目前AWD网页主要针对这几种分辨率（320，480，760，960，1200，1600）

在下图中可以看到，Responsive design中网页和屏幕分辨率的关系是一对多的，一套网页适应多个设备。而Adaptive design 中网页和屏幕分辨率的关系则是一一对应。

因此Responsive design相对来说灵活性更高，但是相应的每次的载入内容会比较多。

而只针对某一类或某几类分辨率设计响应网页大小Adaptive design的优势就在于减少载入的等待时间，提高网页的响应速度（见下图）。

至于什么时候使用Responsive design或Adaptive design很大程度取决于你的开发时间和预计的开发成本。如果在开发时间较为紧张的时候，同时也希望尽可能的让网页自适应于多种设备，争取在不同类型的屏幕上都保持良好的用户体验，那么使用Adaptive design的方式也是不错的选择。

参考资料：UXPIN UX DESIGN 2015&2016 - Successful Trend for Digital Product