【转载】网页设计中 RWD 与 AWD 的区别

本文整理了一些关于什么是所谓的响应性网页设计（RWD）和适应性网页设计（AWD）之间混淆的问题。两者的目标是相似的，但方法不同。 两种方法不同之处在于响应性/适应性结构的交付：RWD依靠灵活和流动的网格，而AWD依赖于预定义的屏幕尺寸。

Builder开发者在线导读：本文整理了一些关于什么是所谓的响应性网页设计（RWD）和适应性网页设计（AWD）之间混淆的问题。两者的目标是相似的，但方法不同。

今年在网页开发人员圈子中最热点问题之一是在不同的设备除了标准台式机或笔记本电脑屏幕上网站的可访问性。尽管这个主题不是新鲜的，但其就如何提前对付这些机遇方面却采用了相对新的方法。

随着移动设备、平板电脑以及相似的小工具以比大多数工具可以保持的更快速度普及开来，因此对于利益相关组织来说有必要解决包含在最新微小的小装置上的网站的用户交互和接受问题。哦，不要忘记其它需要网络连接使用屏幕的设备，例如冰箱、洗衣机以及其它的日用家电。

通过他们的移动设备或其它显示屏幕访问您的网站的用户并不真得关心您使用什么方法，只要他们在其正使用的任何设备上可以有效地操纵您的网站即可。 因此，在本文中描述的这两种方法已经设计出以使网页开发人员满足要求，与此同时响应性(RWD) 和适应性 (AWD) 设计方法均可以解决在移动设备上使用网站的问题，在两者之间有我尝试来解释的细微差别。

RWD

词组响应性网页设计由Ethan Marcotte 于几年前创造，在其列表分离文章“响应性网页设计” 和稍后的图书一本书分离 – 响应性网页设计中首次引入此概念。Marcotte关于RWD的关键点在下面列出。在我关于该主题的文章 “如何开始响应性网页设计”中， 我描述了响应性网站设计如何从合并CSS3、媒体查询、@media原则以及使用百分比来创建柔性基础的流动网格的首要任务开始。 这些关键点，以及Ems、灵活图像、灵活视频以及流体类型允许响应性网站可以使其布局适应于查看设备、用户代理和环境。

响应性网页设计的精炼定义是其会流动地改变并响应以适合任何的屏幕或设备尺寸。

AWD

词组适应性网页设计由 创造，其编写了与这一词组相同标题的图书 。其本质上使用渐进增强 (PE)的组件作为定义一套设计方法的方式，关注用户而非浏览器。使用一套预先定义的基于设备屏幕尺寸的布局尺寸和CSS 以及 JavaScript一起, AWD 方法适应于检测到的设备。一篇最近的文章“理解网页设计中的渐进增强技术” 描述了组成适应性方法的层次。

渐进增强的三大层次：

在最近的播客采访中， Aaron 说明了是如何选中这个术语的；他想要区分其书籍与Filament集团的图书 “使用渐进增强设计”。 Aaron 在该播客中继续提到：

“因此，我们正冥思苦想，您知道的，所有的这个东西真正正确的意义是什么，其关于创建丰富的、适应性强的体验以使这些体验适合您正在使用的特殊装备。这样，我认为渐进增强的方式就非常类同于适应性网页设计。其本质上是相同的概念。”

适应性设计的扼要定义是其将要改变以适合于一套预定义的屏幕和设备尺寸。

对比和区别

两种方法之间的最大相似点是它们都允许在移动设备和不同的屏幕尺寸下查看网站，最终提供给访问者以更好的移动用户体验。两种方法不同之处在于响应性/适应性结构的交付：RWD依靠灵活和流动的网格，而AWD依赖于预定义的屏幕尺寸。两者之间的主要区别之一是RWD使用流动网格、CSS、以及灵活的基础可能需要更多的代码和实施策略，而AWD采用流线型的、分层的方法，通过采用生成脚本以帮助适应于不同的设备和屏幕尺寸。

有人可能会认为使用的术语带来了混乱，尤其是响应性，可能不能根据使用的特定移动设备准确地反映网站改变其设计时实际上出现的事情。Paul Gordon在其博客文章中提出这点， “ 适应性或响应性设计“。

如果您感兴趣于回顾那些使用在本文中描述的方法的已知网站的活生生例子，查看来自Splashnology网页设计与开发(AWD 和RWD都有出现)的 现代响应性网页设计的70例的一览表。

在该列表上的网站之一包括 Abberdein, 其在WordPress Whiteboard 架构中使用RWD，在代码中使用几个特征像是将div 栏宽作为百分比 (%)。其同时使用  较少框架CSS网格系统,包括四个布局方式和三套排印预设，所有的这些都基于单一的网格。

使用AWD的网站的例子将会是Screaming Frog,一种搜索引擎营销代理，其采用在其CSS 中的@媒体查询 和 @媒体屏幕属性来设置断点，这些断点所在的固定像素宽度取决于在浏览器窗口识别的设备。