响应式设计 VS 自适应设计

现在，移动设备普遍，用户量远超桌面设备，很多用户使用移动设备（手机、平板等）浏览网站。于是，除了传统的桌面端，对移动小屏设备的良好支持，提供移动设备用户体验，成为几乎所有网站设计的一个要素。现在，主流的解决方案是响应式网页设计（Responsive Web Design）和自适应网页设计（Adaptive Web Design）。

1、What：响应式设计 VS 自适应设计

网上一搜，对这两者概念混淆的一堆，或张冠李戴，或混为一谈，或含糊不清......无奈，启动English模式。

先看响应式网页：

Responsive web design (RWD) is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. (From Wikipedia)

响应式网页设计是一种使网页能够在不同窗口大小或不同屏幕大小的设备上都良好展示的网页设计技术。

再看自适应网页：

Adaptive web design(AWD) is a process of server-side detection that chooses a design layout and size to display. The adaptive design will serve different versions of the site (or page) to different devices based on common screen sizes and resolutions. (From Wikipedia)

自适应网页设计是一种后端检测技术，它（根据用户代理）选择布局和大小合适的页面。自适应设计会根据屏幕尺寸和分辨率，为不同设备提供不同版本的网站（网页）。

所以，尽管它们的结果都是使得网站在不同的设备上都能布局良好，却从根本上是不同的技术。响应式是一个页面在不同大小的屏幕（窗口）上布局不一样，而自适应是根据用户代理使用不同版本的网页。

文字不好理解，那么请看案例：

• 响应式网站：掘金
• 自适应网站：京东

打开网站，改变浏览器窗口宽度，看看二者变化的不同。再使用浏览器开发者工具的移动端模拟器刷新网站，看看跟桌面端的不同。

可以发现，响应式页面是随着窗口变化的，不需要刷新。而自适应是根据用户代理（UA）类型改变的，并且需要刷新。而且，响应式内容基本上是一样的，只是布局发生了变化，而自适应的网页内容整个变了。

简而言之：响应式一套代码，自适应多套代码。

2、How：响应式设计 VS 自适应设计

从二者的技术实现看，更能清楚认识到二者的区别。响应式属于前端工作，而自适应是后端工作。

响应式主要是CSS方面的运用，或者额外借助少许JS，主要的实现手段有：

• 媒体查询
• 百分比布局
• 响应式布局（flex、grid、多列）
• 响应式图片
• rem布局、vh、vw

而自适应是需要多个版本的网页，一般来说，移动设备一套，桌面设备一套，服务器收到用户请求后，根据HTTP请求中的UA头判断设备类型，选择合适的网站版本。

1. 多域名与重定向。很多大型复杂网站使用的方式，网站的不同版本发布到不同域名。最常见的是使用xxx.com和m.xxx.com域名。如果服务器判断出用户代理是移动端，则重定向到m.xxx.com域名。
2. 子文件夹与重定向。与1类似，但是把移动端保存在某个子文件夹中，移动端重定向到xxx.com/m/下。
3. 多模板与动态选择。一个网页需要多个模板，后端根据UA类型选择合适的模板，只需要一个域名。

3、Which：响应式设计 VS 自适应设计

二者对比：

从这些对比来看，二者都各有优劣，采用哪种方案，更多取决于开发的成本和网站的类型。

对于一个已经定型的大型网站来说，去修改其样式，使得其具有响应式，是一件令人头疼的事，它的工作了不亚于开发一个新的移动版本的网站，这种时候自适应设计会更合适一些。

另外，对一些内容复杂多样的网站，尤其是电商网站，很难使得响应式在移动端和桌面端都有令人满意的布局，花费更多的工作量来为使用不同设备的用户量身定制是值得的工作。

除去上面的情况，对于新开发的网站，响应式布局更受欢迎，它工作量少，并且在主打简洁布局的网站中都有不错的用户体验，成为大部分现代网站的首选，尤其是博客、资讯类网站。

然而，俗话说，小孩子才做选择，我全都要。事实上，响应式与自适应并不冲突，上面的讨论可以发现一个是前端工作，一个是整体工作。理想情况下，我们可以让多个版本的网页都具有响应式，这能解决一个大问题，即使都是移动端，从iphone5到ipad，屏幕差异非常明显，响应式使得网页在它们上面都能良好呈现。

结果是，尽量为网站提供响应式的布局，如果有必要，请增加不同版本的网站，实现自适应。