响应式设计与自适应设计

Question

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

Answer 1

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

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

简而言之：RWD与AWD类似，只是进一步采取了一两步，以便为未知设备以及已知设备进行未来验证设计。

Answer 2

流体布局

  

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

自适应布局

  

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

响应式布局

  流体和自适应布局的

组合。提供最佳体验。

渐进式增强

  

通过申请表彰您的内容（和您的用户）的过程   技术以智能方式，层层次。渐进增强不要求您在不同的浏览器中提供相同的体验。

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

Answer 3

来自my blog post on the topic：

  由Ethan Marcotte创造的“响应式网页设计”意味着“流畅   网格，流体图像/媒体＆amp;媒体查询。“”自适应网页设计“，作为   我用它，是关于创建适应用户的接口   能力（形式和功能）。对我来说，“适应性   网页设计“只是”渐进增强“的另一个术语   哪种响应式网页设计（通常应该）是不可或缺的一部分，   但它也是一种更全面的网页设计方法   考虑到不同级别的标记，CSS，JavaScript和辅助   技术支持。

     

为了记录，我认为区分是很重要的   在“自适应网页设计”和“自适应布局”之间，因为“自适应网络”   布局“仅暗示使用媒体查询，这可能无法完成   以逐步增强的方式。在a中实现自适应布局   然而，移动优先方式很可能是渐进式增强   从而，这是一种“自适应网页设计”的手段。

Answer 4

我见过的另一种定义将其分解为魔术发生的地方：

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

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

不确定此定义如何与其他更多关于页面内容流动的其他内容结合在一起。

Answer 5

自适应网页设计与响应式网页设计之间的差异比此线程中建议的区别更广泛，更重要。差异既不是软件功能所在的位置，也不是CSS条件中使用的测量单位。

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

适应性表示比简单的程序化响应更高的功能。开发能够扩张的学生的能力是一种适应性设计。适应需要存储历史及其后来的应用。在生物学中，适应需要DNA来存储适应性。在网页设计中，可以将修改存储在cookie或服务器上的用户帐户配置文件中。

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

  

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

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

使用字典定义或ADAPTIVE的通用计算机科学定义，自适应网页设计的文档布局必须基于一些更高的标准而不是简单的静态大小阈值（连续评估的标准）进行智能变化。自适应网页设计的一个很好的定义是：

  

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

ADAPTIVE一词在网页设计方面的其他一些用途，仅仅是对另一种响应式设计方法的过分信任，没有比其他方法更智能或更具适应性。

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

简单规则的一个示例是，＆＃34;按照从最频繁到最不频繁点击的顺序对链接进行排序，每10个显示在第二位放置一个不太受欢迎的链接，以确保元素可以随时间流逝。 ＆＃34;

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

Answer 6

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

1. 固定布局：使用像素。
2. 流体布局：使用百分比。
3. 响应式布局：仅使用媒体查询的百分比
4. 自适应布局：在媒体查询中使用像素和百分比

Answer 7

简单地：

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

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

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

Answer 8

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