自适应网站和响应式网站建设有哪些区别？

在当今这个互联网产业日益发达的时代，随着智能手机和平板电脑的快速普及，一个网站面对的用户屏幕可以说是各种各样的，为了更好的用户体验，就提出了网页设计中的响应式网页设计与自适应网页设计两种方法，本文将带大家了解这两种方法的区别。

当你网上搜索这两个关键词时，你会发现有人可能把它们混淆成了一种，一些博文解释这两个概念时，也涉及很多专业名词和相关技术，本文暂不讨论技术，力图用简单明了的例子和表述解释两者的差别。

1、响应式设计（Responsive Web Design）

响应式设计一词首先由网页设计师兼开发人员Ethan Marcotte在他的“ 响应式网页设计”一书中创造。响应式设计通过调整设计元素的位置以适应可用空间来响应浏览器宽度的变化。

一般来说，响应式设计（RWD）倾向于只改变元素的外观布局，而不大幅度改变内容。

Jeffrey Z. 总结非常好，把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术，简单的概括，服务器不知道来访的设备是什么，所有的设备都是用的同一套逻辑。纯正的响应式设计（RWD）非常适合CDN。

响应式布局能够兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，不同尺寸下弹性显示不同的响应式内容（图片、多媒体）

设计思路：移动优先：一切从最小屏幕的手机端开始（比如 iPhone 的 320px ），先确定内容，然后逐级往大屏幕设计。不同于原来网页设计，总是从桌面电脑的 1024px 开始的。

2、自适应网页设计（Adaptive Web Design）

自适应网页设计由网页设计师亚伦·古斯塔夫森（Aaron Gustafson）于2011年在《Crafting Rich Experiences With Progressive Enhancement》一书中介绍。它也被称为网站的渐进增强

自适应网页设计（AWD）促进创建网页的多个版本以更好地适应用户的设备，而不是在所有设备上加载（并且看起来）相同的单个静态页面，或者单个页面重新排序和调整内容的大小响应地基于用户的设备/ 屏幕尺寸 / 浏览器。

它的策略是优化移动网站的可读性，最常见的做法涉及使用移动设备和桌面一个完全独立的网站，与通常的移动设备重定向到网站的移动版本提供一个子域（常第三级子域，表示为“m” ;例如http：// m .website.com /）。

在自适应设计中，为六种最常见的屏幕宽度开发六种设计是正常的; 320,480,760,960,1200和1600像素

今天，用于移动和桌面查看的两个独立静态站点的使用正在逐步淘汰，而服务器端脚本则用于动态提供服务生成的页面或动态决定要提供的静态页面的版本。

服务器知道用户是从手机上访问的，所以就发送手机上专用的资源给手机，这样打开会更快些。AWD其实是CDN（内容分发网络）不友好的，因为CDN不会识别访问设备哦，至少目前还没有一个支持。

响应式网页设计（RWD）和自适应网页设计（AWD）

的关系和特点

响应式布局的特点：

1、节省人力开发成本，不需要同是维护移动端和pc端；

2、表现力一致，在不同平台上看到的东西是基本一致的，会让感觉体验良好；

3、跨平台：在手机、pad、电脑上都有不俗的表现。

自适应布局的特点：

1、实施起来代价低，测试容易，让你的网站更可控，是一种更切合实际的解决方案。

2、访问速度快，搜索引擎偏好。

关系：

两者并不排斥，有时候最佳实践是采用两种技术的组合来支持完整的硬件和软件。

适合的场景：

响应式设计不适合于大型门户或电商网站，因为其基本原则是不会因为设备不同而给予用户不同的内容（比如在低分辨率的设备上删减某些内容），所以一般大型门户或电商网站都会提供一个移动版设备的网站，或者只能缩放查看

响应式设计是比较容易和花费更少的工作来实现。它在每个屏幕尺寸上对您的设计提供的控制较少，但它是目前创建新网站的首选方法。这也可能与大多数内容管理系统（CMS）（如WordPress，Joomla等）可用的大量廉价模板有关 - 毕竟，谁想要重新发明轮子？

对于已经上线的网站，直接改造成响应式布局会有困难，一般采用m.xxx的方法（自适应网页设计）独立实现移动端

小结一下：

简单来说，响应式设计（RWD）目标是一个页面在所有终端上（各种尺寸的pc，手机，智能终端上的web浏览器）都显示出令人满意的效果。

而自适应设计（AWD）是为不同的屏幕或设备创建不同的页面（或者说页面布局），通过服务器和浏览器的共同协作，为用户提供适合的页面，一个站点一般会通过手机版或平板版或桌面版去实现。