什么是自适应和响应式设计？

自适应设计与响应式设计：关键区别

自适应设计和响应式设计是两种不同的网页设计方法。自适应设计基于断点使用静态布局，加载后不会响应；而响应式设计是流动的，使用百分比作为度量单位，根据浏览器宽度进行调整。

项目选择哪种设计取决于具体需求。自适应设计能提供更量身定制的用户体验，因为它允许为不同设备专门设计，但需要更多工作。响应式设计更灵活，更容易实现，但可能无法提供同样量身定制的体验。

实施自适应设计可能提高网站加载速度，因为它只加载特定设备所需的资源。但是，它需要深入了解目标受众使用的不同设备，并可能增加开发时间和成本。

“响应式设计”的误区？

我们都熟悉“响应式设计”这个术语，它意味着设计可在所有设备和屏幕尺寸上正确显示的网站。但有人认为“自适应设计”更贴切。

它们是同一回事吗？或者“自适应设计”完全是另一回事？“流体设计”又该如何理解？

这个问题看似简单，但经过一番研究，我发现它比我想象的更模糊，甚至可能存在争议。

自适应设计似乎存在两种定义：

定义1：响应式设计像自拍杆，自适应设计像雨伞

在这个定义中，响应式设计的网页——就像自拍杆一样——可以在从完全伸展到完全缩回以及两者之间的任何点等多种状态下使用。当然，某些宽度或断点比其他断点更重要，但每个不同的宽度都会生成略微不同的布局。

自适应设计更像一把雨伞。它有预设的“状态”——打开以挡雨，关闭以便携带。“中间状态”无关紧要。

自拍杆与雨伞

许多 GIF 动画很好地说明了这一概念。

2015 年，Geoff Graham 概述了他对两者差异的看法，他说响应式布局在任何给定时刻都适应浏览器的宽度，而“自适应布局”只在特定断点适应浏览器的宽度。

Geoff 说，响应式设计基于百分比（即与流体设计相同），而自适应设计基于固定的测量单位。两者都由 CSS 媒体查询驱动。

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

然而，正如您从 Geoff 文章下面的评论中看到的，并非所有人都同意此定义。

以下是顶级评论：

“响应式设计可以是流动的或固定的，自适应设计也可以。区别在于响应式设计不关心使用哪个浏览器，它响应浏览器大小并相应地重新调整布局。另一方面，自适应设计专门适应浏览器环境，并且可能考虑也可能不考虑浏览器当前的大小。” ⏤ zzzzBov。

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

许多知名人士都表达了自己的意见，从 UXPin 到 Mozilla，但它似乎仍然悬而未决。

我的看法

让我们用可调节的台灯作为现实世界的例子：响应式设计是当您拨动开关时，台灯响应并打开灯光。自适应设计是您可以调整/适应台灯以更好地观看。

如果网站没有响应您的交互，它就不是非常响应的，如果它无法适应其周围环境（即设备屏幕），它就不是非常自适应的。这两者都会严重影响用户体验。

为什么响应式设计并非真正的响应式设计

响应是另一个动作的结果，例如，如果网站按钮在用户悬停在其上时更改其背景颜色——动作是悬停，响应是背景颜色更改。

通常，当我们说网站具有响应性时，我们的意思是它适应任何设备上的任何屏幕尺寸，但实际上，它应该意味着它响应用户交互。原因如下：

用户无法调整其移动设备上的浏览器大小。虽然用户可以更改台式机计算机上的浏览器大小，但他们通常不需要这样做来与网站交互——这不是正常的用户交互。当然，我们网页设计师经常调整浏览器大小来测试网站，但这对于用户来说不是正常的动作。

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

由于屏幕尺寸通常以其默认状态使用（从某种意义上说，您无法或不需要调整其大小），因此术语“自适应设计”可能更贴切。网站（至少设计良好的网站）会修改其布局以适应用户的设备；这是一个非自主行为，这意味着用户不必与网站交互即可使其适应。自适应设计还可以描述我们如何优化加载时间和小型手持设备的感知性能。

那么流体设计是什么呢？

在 2000 年代初期，最大的争论是“固定布局与流体布局”。流体设计布局使用百分比设置，以适应浏览器框架。固定布局设置为由像素宽度确定的单个布局。两者都不理想。固定布局在正确的屏幕上看起来很棒，但在小型显示器上却无法使用。流体布局更灵活，但在宽屏显示器上看起来很细长。响应式设计是 Ethan Marcotte 对这些设计难题的直接回应——并非双关语——。经典的“可伸缩”RWD 就像流体设计的成熟版——伸展以填充窗口，但在必要时重新组织自身。Geoff 对自适应设计的定义——尽管许多人不认同——就像“固定设计的成熟版本”——不是单个固定布局，而是 3、4 个或更多布局。

结论

这就是我对响应式设计和自适应设计的看法。阅读本文后，您是否会改变谈论这些术语的方式，或者继续将响应式设计作为使网站适应多个屏幕尺寸的一种方式更容易一些？

您是否曾经使用过“自适应设计”这个术语，却只得到茫然的眼神？

我很想知道，请在下面的评论中告诉我！

（请勿争吵！）

自适应设计与响应式设计的常见问题解答 (FAQ)

自适应设计和响应式设计的主要区别是什么？

自适应设计和响应式设计的主要区别在于它们对用户体验的方法。自适应设计基于断点使用静态布局，一旦最初加载，它们就不会响应。另一方面，响应式设计是流动的，它使用百分比而不是像素作为度量单位来根据浏览器宽度进行调整。

自适应设计比响应式设计更好吗？

自适应设计和响应式设计的选择取决于项目的具体需求。自适应设计可以提供更量身定制的用户体验，因为它允许为不同的设备创建专门的设计。但是，它需要更多工作，因为您需要为每个屏幕尺寸创建设计。另一方面，响应式设计更灵活，更容易实现，但它可能无法提供与自适应设计一样量身定制的体验。

自适应设计如何影响网站的加载速度？

自适应设计可能会提高网站的加载速度。这是因为它只加载特定设备所需的资源，这可以减少需要下载的数据量。

实施自适应设计的挑战是什么？

实施自适应设计可能比响应式设计更复杂、更耗时。它需要深入了解目标受众使用的不同设备，并为每个设备创建特定设计。这会增加开发时间和成本。

自适应设计可以改善用户体验吗？

是的，自适应设计可以显着改善用户体验。通过创建针对特定设备量身定制的设计，您可以确保您的内容以最优的方式在每个设备上显示。这可以带来更愉快和高效的用户体验。

自适应设计适用于所有类型的网站吗？

虽然自适应设计可能对许多类型的网站有益，但它可能并非对所有网站都是最佳选择。需要针对不同设备进行高度定制的网站可以从自适应设计中受益。但是，对于更简单的网站，响应式设计可能是更经济高效的选择。

自适应设计如何影响 SEO？

自适应设计可能对 SEO 产生积极影响。通过提供更好的用户体验和更快的加载时间，它可以提高您网站在搜索引擎结果中的排名。但是，重要的是要确保您网站的所有版本都具有相同的内容和元标记，以避免任何潜在的 SEO 问题。

实施自适应设计需要哪些技能？

实施自适应设计需要对网页设计原理有深入的了解，以及 HTML、CSS 和 JavaScript 的知识。它还需要能够为不同的设备和屏幕尺寸进行设计，并了解如何为不同的设备优化资源。

自适应设计可以与响应式设计一起使用吗？

是的，自适应设计和响应式设计可以一起使用。这种方法被称为“RESS”（具有服务器端组件的响应式设计），它结合了响应式设计的灵活性和自适应设计的设备特定优化。

自适应设计的未来是什么？

随着不同设备和屏幕尺寸数量的不断增长，对自适应设计的需求可能会增加。但是，随着技术的进步，结合自适应设计和响应式设计最佳方面的新设计方法可能会出现。

以上是什么是自适应和响应式设计？的详细内容。更多信息请关注PHP中文网其他相关文章！