响应式设计与自适应设计

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

从我关于这个主题的博客文章:

Ethan Marcotte创造的"响应式网页设计"意味着"流畅的网格,流畅的图像/媒体和媒体查询"."自适应网页设计",正如我所使用的那样,是关于创建适应用户能力的界面(就其而言)形式和功能).对我来说,"自适应网页设计"只是"渐进式增强"的另一个术语,响应式网页设计可以(通常应该)成为不可或缺的一部分,但它是一种更全面的网页设计方法,因为它还考虑到了变化标记,CSS,JavaScript和辅助技术支持的级别.

为了记录,我认为在"自适应网页设计"和"自适应布局"之间进行区分非常重要,因为"自适应布局"仅意味着使用媒体查询,这可能无法以逐步增强的方式完成.然而,以移动优先方式实现的自适应布局很可能是渐进增强,因此是"自适应网页设计"的手段.

Answer 4

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

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

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

不确定这个定义如何与其他一些更多地讨论页面内容流的人合在一起.