AWD（自适应网站设计）和 RWD（响应式网站设计）是当今比较常见的网页设计方式，也是网站开发的趋势。此外，关于选择哪种设计方式的讨论也逐渐成为趋势。因为，用于上网的设备的种类逐步在增加，设计师或开发人员需要创建能够满足各种不同浏览器和屏幕大小要求的解决方案，因此他们需要决定应该使用哪种设计方式来满足越来越苛刻的用戶！

其实，这两种设计方法存在的目的一致：都是为了让网站在不同设备以及不同浏览器上呈现出较佳的用戶体验，无论是手机、平板，还是笔记本电脑、桌面电脑；无论是 Chrome、IE 浏览器，还是 Safari等浏览器。

尽管任务相同，但AWD（自适应网站设计）和 RWD（响应式网站设计）在网站开发技术上存在着差异。因此，本文分别阐述了AWD 意思、RWD 意思、两者间的主要区别，以及在何种情况下使用 AWD 或 RWD 方式，希望本文的介绍能帮你挑选出适合你的网页设计方式。

1.  AWD（自适应网站设计）是什么？

AWD（Adaptive Web Design，自适应网站设计）的主要理念是创造最佳的用戶体验，即网站可以不受任何技术限制地访问。自适应网站设计基于不同布局以及某些预先指定的设备和屏幕分辨率，开发出适应这些设备的不同版本的网站。也就是说，AWD是一种跨平台网站设计解决方案。

AWD 的出现是一件好事情，因为除了笔记本电脑、平板电脑和屏幕尺寸各异的智能型手机外，我们现在还有非常大的电视、小屏幕的手表和板载电脑，所有这些都可以接入网络，AWD 的介入，可以让用戶在这些设备上得以正常浏览不同版本的网页。

判断一个网站是否是通过 AWD 方式制作出的网站，可检查其网址在不同设备上是否是不一样。一般情况下，AWD 自适应网站手机版本的网址以“m”开头，例如：脸书在手机设备上的网页网址为 https://m.facebook.com/。

facebook 电脑版网页

facebook 手机版网页

2.  AWD 优缺点

以下是自适应网页设计的优点：

• 可依照不同设备设计独特的网页界面，因为服务器定义了设备类型且可传输不同的网站版本。
• 具有为特定类型的设备创建一个美观的定制化网站的可能性。

以下是自适应网页设计的缺点：

• 开发过程昂贵且复杂。
• 更新和维护过程昂贵且复杂。

3.  RWD（响应式网站设计）是什么？

全球第一次听说 RWD（Responsive Web Design，响应式网站设计）是在2010年，当时一位名叫Ethan Marcotte的设计师在一篇文章中提到了这个词，后来他写了一本名为《响应式网页设计》的书，这本书仍然被认为是这个主题最可信的来源。

采用 RWD 方式制作的网站，适用于所有设备和浏览器，你可以通过 CSS 程序设置网站内容的字体大小、行距、是否添加相同的图片等版面，让网页符合浏览器的屏幕大小、在不同设备上呈现出适合的排版。

不同设备上显示的网站是同一个网址，例如本网站、https://www.apple.com/cn/ 就是通过RWD方式设计、制作出的网站。

apple 电脑版网页

apple 手机版网页

4.  RWD 优缺点

RWD 之所以会成为主流的跨平台网站设计方式之一，是因为它有以下几个优点：

• 一个URL可用于网站的所有版本，从而使其推广变得容易很多。
• 搜索引擎，如Google，非常注重移动版网站的用戶体验，他们将其作为影响SEO排名的一个很重要的因素。响应式网站设计正好对移动设备是非常友好的，采用 RWD 方式非常有助于提高SEO积分。
• 可以呈现不同设备上的不同外观。
• 响应式网站在设计、维护成本上低很多。

虽说 RWD 在当今网站设计行业中比较流行，但它也有相应的缺陷：

• 有时手机屏幕上的内容太多。
• 不可能为当代所有设备制作出所有多样性网站。

5.  AWD 和 RWD 差异比较

AWD 和RWD 都是相当成熟的网页设计方式，AWD 较 RWD 出现更早，RWD 弥补了 AWD 的一些劣势。

6.  AWD 和 RWD 分别对 SEO 有什么影响？

2020 年 9 月，Google 已全面执行“移动版内容优先索引”的操作，也就是说，移动版网站成为了 Google 优先检索及排名网站的依据。

（1）网页加载速度

采用 AWD 设计方式，网页加载速度会很快，因为在开发过程中，开发人员可以专门提升手机版网站使用体验，他们可在代码上针对手机设备量身定做。相比之下，RWD 必须把众多跨平台设备版本的网页代码集中在一个页面上去执行，文件肥大，所以经常需要缓存技术提升网页加载速度。

（2）重新指向

AWD 在手机版和电脑版的网页网址不同，但为了让两个版本的网站相互对应、自动转换，一般会采用“重新指向”的方式来处理，但这项处理会增加网站的反应时间，导致访客跳出率变高，进而对 SEO 产生负面影响。

（3）重复内容

AWD 在手机版和电脑版的网页网址不同，对搜索引擎来说，如 Google，容易将其判定成重复内容，需在手机版网页上标注“电脑版的对应网址”，否则非常不利于网站的排名。

7.  AWD 和 RWD 该如何选择？

在以下情况下，选择响应式网站设计（RWD）是个好主意：

• 你的时间和资金预算比较有限。
• 你倾向于简单、干净的设计和功能，而不需要采用它来满足各种需求。
• 你旨在简化网站维护和更新过程。

在以下情况下，自适应式网站设计（AWD）将是一个很好的选择：

• 你绝对确定你将需要吸引很多不同设备的受众群体。
• 你有时间和预算来创建和维护不同设备上的不同版本的网页。

最后但并非最不重要的一点是，这 2 种方式没有绝对的谁更好或更差，只有适合与不适合。

我们希望在阅读这篇文章后，你能对 AWD 和 RWD 有更好的理解，并对你的选择有帮助。

8.  结语

除了庞大、结构复杂的大型系统性网站外，一般网站采用 RWD 方式进行制作即可。

如果你的网站相对简单，RWD 绝对是最好的选择，你可以在很短的时间内建设网站，并且上线，所有的组件都可以在 RWD 模式下顺利工作。总体而言，RWD 是更快、更简单的选择。此外，在后期编辑过程中，RWD 只需要在 CSS 代码上固定一次，而 AWD 有不同的结构需要编辑。

另一方面，搜索引擎优化在网站中扮演着重要的角色。RWD 是 Google 推荐的手机版网页设计方式。根据 Google 的说法，响应式网站在搜索排名中的表现会更好，因为它们比不适合移动设备的网站提供了更好的用戶体验。

-> 只有技术人员或开发人员才能进行网站设计？NO ！其实，我们个人也可以干这件事，请参考网站设计 – 新手设计网页最终指南这篇文章，帮你节省数千元甚至上万元的网站设计费用。