什么是自适应设计？与响应设计又有什么区别？(设计有什么设计,关键词优化)

响应式设计是我们现在应该熟悉的术语，但术语是否准确地描述了我们认为的意思？我们已经认识到“响应式设计”是在所有设备和屏幕尺寸上正确显示的网站的行为。但有些人认为“适应性设计”是更好的名称。

这是真的吗，还是他们是一样的？或者“适应性设计”是否完全意味着什么？“流体设计”在哪里适合所有这一切？

虽然这听起来像一个相当直截了当的问题，经过一番调查，我发现这比我猜到的更加模糊，甚至可能有更大的争议。

这里似乎有两个相互竞争的自适应定义：

定义1：响应式设计是一个自拍棒，自适应设计是一个伞

在这个定义中，响应式设计的产品-就像自拍棒一样-可以在许多状态下使用，从完全扩展，完全缩回和中间的任意点。当然，某些宽度或断点比别人更重要，但是每个不同的宽度都会产生略有不同的布局。

自适应设计的行为更像一把伞。它已经预设了“状态”：下雨时打开，雨停了就关起来。中间状态是不重要的。

这里有个GIF动画很好地说明了这个概念。

在2015年，杰夫·格雷厄姆（GeoffGraham）概述了他对差异的看法，他说，响应式布局适应了任何给定时刻浏览器的宽度，而“适应性布局”仅适用于特定断点处的浏览器宽度。

Geoff表示，响应式设计基于百分比（即与流体设计相同），自适应设计是基于固定的测量单位。两者都由CSS媒体查询提供支持。

定义2：自适应设计响应整个设备环境（而不仅仅是屏幕）

但是，从Geoff文章中的评论可以看出，并不是每个人都同意这个定义。

这是最高评论：

“响应式设计可以是流畅的或固定的，所以可以适应，不同之处在于响应式设计不关心使用什么浏览器，它响应浏览器大小并相应地重新布局布局;另一方面，自适应设计适应于浏览器环境具体，可能或可能不会考虑浏览器的当前大小。”zzzzBov。

通过zzzzBov的定义，自适应设计是JavaScript驱动的，与设备类型对屏幕尺寸的反应一样多。例如，平板电脑可能具有高分辨率屏幕，但它需要较大的触摸目标。手机可能需要不同的导航系统。

许多大名鼎鼎，他们的观点不一，从UXPin到Mozilla，但仍然未被解决。

让我们用现实世界可调节的灯泡作为一个的例子：响应式设计是当你轻击开关，而灯通过打开来响应。自适应设计是当您能够调整/适应灯泡及亮度，以便使你能更好地看到东西。

如果一个网站没有回应你的互动，那么它的反应并不是那么敏感，而且如果它不能适应它的环境（即设备屏幕），那就不是很适应。这两者都可以显着影响UX。

为什么反应性设计不是响应式设计

响应是另一个动作的结果，例如，当用户将鼠标悬停在其上时，如果网站按钮改变其背景颜色-动作就是悬停，并且响应是背景颜色被改变。

通常，当我们说一个网站响应时，我们的意思是它适应任何设备上的任何屏幕尺寸，但实际上它应该意味着它响应用户交互。这就是为什么：

用户无法在移动设备上调整浏览器的大小。而用户可以在桌面计算机上更改浏览器大小，通常不需要这样做来与网站进行交互-这不是一个正常的用户交互。当然，我们的网页设计师经常调整浏览器的大小来测试一个

网站，但这不是用户的正常操作。

为什么说“自适应设计”更准确

由于屏幕尺寸通常用于其默认状态（在您无法或不需要调整大小的情况下），术语“自适应设计”可能更准确地符合帐单。网站（精心设计的）至少会修改其布局以适应用户的设备;这是一个非自愿的行动，意味着用户不必与网站进行互动，使其适应。自适应设计还可以描述我们如何优化较小的手持设备的加载时间和感知性能。

那么什么是流体设计呢？

早在二十世纪初，大辩论就是“固定布局与流体布局”。流体设计布局进行设定百分比，拉伸以适应浏览器的框架。固定布局被设置为锁定由像素宽度确定的单个布局。

既不是理想的固定版面在右侧屏幕上看起来很棒，但在小型显示器上无法使用。流体布局更加灵活，但在宽屏幕显示器上看起来很细腻。

响应式设计是EthanMarcotte对这些设计难题的直接回应（不是双关语）。经典的“弹性”RWD就像一个成熟的“成人”版本的流体设计-延伸填补窗口，但必要时重新组织。

Geoff对自适应设计的定义-虽然没有得到许多同意-就像一个“固定设计的大型版本”-不是单一的固定布局，而是3,4或更多的布局。

结论

所以你有它，我采取响应和适应性设计。阅读这篇文章后，你会改变谈论这些术语的方式，还是更容易地谈论响应式设计，使网站适应多种屏幕尺寸？