响应式设计与自适应设计答案

【问题标题】：Responsive design vs adaptive design响应式设计与自适应设计
【发布时间】：2013-02-12 11:31:13
【问题描述】：

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

【问题讨论】：

你谷歌了吗？ bloggingexperiment.com/archives/…
谷歌 2：responsive-vs-adaptive-web-design

标签： responsive-design adaptive-design

【解决方案1】：

流体布局

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

自适应布局

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

响应式布局

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

渐进式增强

通过申请来尊重您的内容（和您的用户）的过程逐层。渐进式增强不需要您在不同的浏览器中提供相同的体验。

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

+1：我会将这些资源添加到对话中。 1stwebdesigner.com/design/… 和 simple-talk.com/dotnet/asp.net/a-foundation-for-the-web（参见我的金字塔下的战略）
所以 AWD 可能不介意这些断点之间的分辨率（320,768，...），但 RWD 关心它。对吗？
我不同意这种对 AWD 的描述：维基百科在我看来是正确的：en.wikipedia.org/wiki/Adaptive_web_design
@AaronGustafson 使用术语“自适应”来简单地区分尺寸单位，即布局容器算法中的乘法因子，严重削弱了该术语的含义。这就像调用电子表格自适应一样，因为它将宏观经济预测指定为 GNP 的百分比而不是美元。我可以将这个术语应用于 Web 应用程序中使用的一些机器学习算法，但不适用于简单的布局比例。对于 CSS，无论规范单位如何，浏览器都会响应不适应视口。但是您有权以其他方式思考和发布。
@fauchristian 我明白你的描述，但我想的不仅仅是 CSS。整个体验不仅可以（并且应该）在视觉布局方面进行调整，还可以在行为等方面进行调整。浏览器不是页面可以适应的唯一事物，它还应该适应用户及其需求。语言、布局、对比度、输入法等都是单个网页可以适应情况和使用它的人以最好地满足他们的需求的所有方式。对我来说，响应式设计（也就是响应式布局）是其中的一部分，但不是全部。

【解决方案3】：

来自my blog post on the topic：

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

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

【讨论】：

【解决方案4】：

我看到的另一种定义按神奇发生的地方对其进行了细分：

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

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

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

【讨论】：

【解决方案5】：

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

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

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

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

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

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

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

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

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

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

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

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

【讨论】：

这是本页上唯一一篇展示对适应性的理解的帖子。 @Douglas Daseeco，很遗憾有这么多人跳上这样一个愚蠢的乐队。

【解决方案6】：

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

固定布局：使用像素。
流体布局：使用百分比。
响应式布局：仅对媒体查询使用百分比
自适应布局：在媒体查询中同时使用像素和百分比

【讨论】：

【解决方案7】：

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

【讨论】：

这个答案似乎并没有比现有的多个答案增加价值。今后，请在自己发布之前先看看现有的答案，以避免发布严重冗余的材料。

【解决方案8】：

简单地说：

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

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

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

【讨论】：