随着智能手机和其他移动设备的快速普及，一个网站面对的用户屏幕可以说是各种各样的，为了更好的用户体验，就提出了网页设计中的响应式网页设计与自适应网页设计两种方法，本文将带大家了解这两种方法的区别。

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

响应式网页设计与自适应网页设计的区别

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

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

在自适应设计中，为六种最常见的屏幕宽度开发六种设计是正常的； 320,480,760,960,1200和1600像素今天，用于移动和电脑查看的两个独立静态站点的使用正在逐步淘汰，而服务器端脚本则用于动态提供服务生成的页面或动态决定要提供的静态页面的版本。

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

有些同学可能会好奇，为什么打开桌面版和手机版一样嘞！这就是服务器端侦测用户使用的设备，自动切换成了移动版，也是为了你的良好体验而做的。

好了，本次关于“响应式网页设计与自适应网页设计的区别”的介绍就先给大家讲到这里，我们下期再见！