25

您能以简单的方式解释 RWD（响应式网页设计）和 AWD（自适应网页设计）之间的区别吗？

4

8 回答 8

30

自适应（AWD）：不一定设置在流体网格上；针对特定设备分辨率（320、768、1024 等）；可以设置宽度（固定）或相对宽度（%），由媒体查询控制。

响应式（RWD）：建立在流体网格上；无论屏幕分辨率如何，都会随着浏览器的变化而变化；如果需要，内容可以分解并重新调整。

简而言之：RWD 与 AWD 类似，只是进一步迈出了一两步，以便为未知设备和已知设备进行未来证明设计。

于 2013-02-12T11:41:48.387 回答
10

流体布局

随着屏幕宽度的增加或减少，以自动换行方式进行调整。

自适应布局

有预定义的大小是触发不同的布局。这些被称为断点。自适应布局可以是流动的或完全静态的！

响应式布局

流体和自适应布局的结合。提供最佳体验。

渐进增强

通过以一种智能的方式应用技术来尊重您的内容（和您的用户）的过程，层层叠叠。渐进式增强不需要您在不同的浏览器中提供相同的体验。

资料来源： http ://bloggingexperiment.com/archives/responsive-web-design-rwd-vs-adaptive-web-design-awd.php

于 2013-02-25T08:46:58.633 回答
8

从我关于该主题的博客文章中：

“响应式网页设计”，由 Ethan Marcotte 创造，意思是“流体网格、流体图像/媒体和媒体查询”。我使用的“自适应网页设计”是关于创建适应用户能力（在形式和功能方面）的界面。对我来说，“自适应网页设计”只是“渐进式增强”的另一个术语，响应式网页设计可以（通常应该）成为其中不可或缺的一部分，但它是一种更全面的网页设计方法，因为它还考虑了不同的标记、CSS、JavaScript 和辅助技术支持级别。

作为记录，我确实认为区分“自适应网页设计”和“自适应布局”很重要，因为“自适应布局”仅意味着使用媒体查询，这可能不会以渐进增强的方式完成。然而，以移动优先方式实现的自适应布局很可能是渐进式增强，因此是“自适应网页设计”的一种手段。</p>

于 2013-02-18T19:20:27.827 回答
7

我看到的另一个定义将其分解为魔术发生的地方：

  • 响应式——客户端——向所有设备返回相同的页面，但页面的显示响应设备，通常使用 JavaScript 和 CSS（尤其是媒体查询）。
  • 自适应--服务器端-- 将有关设备规格的信息传递给服务器，并返回适用于该设备的页面。这将使用一些与 RWD 相同的 JavaScript/CSS 技术，但某些内容可能不同/更小。

资料来源：http ://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html

不确定这个定义如何与其他一些更多地谈论页面内容流的定义相吻合。

于 2013-07-23T16:44:12.717 回答
4

自适应网页设计和响应式网页设计之间的区别比这个线程中提出的区别更广泛和更重要。区别既不在于软件功能所在的位置，也不在于 CSS 条件中使用的度量单位。

这两个术语（自适应或响应）都不是品牌，因此我们不应偏离这些词的基本定义。在计算机科学中，响应是在某种刺激下产生的动作、事件或消息。这个定义起源于生物学。响应光线的瞳孔扩张是一种响应式设计。

适应意味着比简单的编程响应更高的功能。培养可以扩张的学生的能力是一种适应性设计。适应需要存储历史及其以后的应用。在生物学中，适应需要 DNA 来存储适应。在网页设计中，调整可以存储在 cookie 或服务器上的用户帐户配置文件中。

让我们从两者中较简单的开始。响应式网页设计的一个很好的正式定义是：

响应式网页设计检查显示特征并以超越 HTML 的内置自动布局功能的方式在页面显示中即时响应，以在各种显示条件下提供方便、实用且最大程度地可见的体验。

便携式设备已经提高了这种额外尺寸响应能力的重要性。许多这样的设计技术围绕着向 CSS（层叠样式表或表单）或通过脚本（例如 JavaScript）添加条件。每个基于显示特征的条件通过控制一组由 CSS 选择器标识的文档元素（标签）的特定样式参数的值来改善整体用户体验。*

使用 ADAPTIVE 的字典定义或常见的计算机科学定义，自适应网页设计的文档布局必须根据一些比简单的静态大小阈值更高的标准进行智能变化，这些标准是不断评估的。自适应网页设计的一个很好的定义是：

自适应网页设计记录使用模式和使用条件，并随着时间的推移进行调整，以更快、更全面或个性化地为用户提供内容和功能。

与网页设计相关的“自适应”一词的其他一些用法过多地归功于另一种响应式设计方法，并不比任何其他方法更智能或更具适应性。

可以将简单的自适应方案编程到 JavaScript 中，以根据从 RestFUL 调用返回到服务器的 JSON 数据来改变 CSS，从而通过 SQL 或 NOSQL 从数据库中获取用户滚动和点击统计信息。更高级的用户体验分析可能使用基于规则的系统（例如 DRules 或 Prolog）或异步运行的模糊逻辑、神经网络或贝叶斯方案。

一个简单规则的示例是，“按从最常点击到最不常点击的顺序对链接进行排序，每 10 个显示将一个不太受欢迎的链接排在第二位，以确保元素可以随着时间的推移逐渐增加。”

琐碎的反馈形式是常见的反馈机制。

于 2016-12-14T04:54:19.837 回答
1

区分流体、固定、响应和自适应布局的最佳链接之一。 http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive-2。简而言之，在您的 html 页面中应用的样式，

  1. 固定布局：使用像素。
  2. 流体布局：使用百分比。
  3. 响应式布局：仅对媒体查询使用百分比
  4. 自适应布局：在媒体查询中同时使用像素和百分比
于 2014-11-03T11:16:50.347 回答
0

简单地：

RWD（响应式）：是针对特定设备的网站的不同结构和设计。（主要是我们在谈论服务器端工作，因为我们在谈论不同的结构和不同的功能）

AWD（自适应）：是针对特定设备的具有相同结构的不同设计。（主要是我们在谈论客户端工作，因为我们只在谈论不同的设计）

请注意，这两种技术旨在为特定设备创建更友好的不同用户体验

于 2013-05-25T16:29:43.543 回答
-1

在网站设计的意义上： 响应式设计：使用流体网格和灵活的内容（例如图像）和媒体查询（在 css 中）创建网页。这将根据浏览器/设备宽度调整布局。 在自适应设计中：使用固定布局创建网页既不是流体网格也不是灵活的内容。用特定点打破页面布局（例如使用媒体查询）。

于 2018-08-09T07:33:36.727 回答