网站建设的自适应+响应模型区别

您可以将其称为Adansive或Resaptive。

自适应和自适应设计是两种设计方法，其目的是使产品可以在任何设备或屏幕尺寸上访问，从而为所有用户提供最佳体验。他们两个都试图充分利用可用的屏幕空间和用户交互模式。在讨论A + R模型之前，我们需要分解两种方法。

尽管响应式设计使用CSS和/或JS根据预定义的断点来调整布局和内容，但自适应方法提供了将根据用户代理和设备类型提供服务的预构建模板。它们之间的主要区别是DOM结构，当采用响应式思维时，我们在所有情况下都具有相同的HTML代码（除非您使用JS删除某些DOM节点），而在自适应模式中，我们具有不同的代码结构和可能不同的体验。

这两种设计思想都是有效的，只需问问自己项目中有多少组件和复杂性以及一种体验是否可以适合所有用户。开发Web应用程序时，经常使用响应式设计，例如通过自适应开发（如Twitter和Facebook mobile）构建特定的体验。

响应式设计技术

在建立响应式体验时，我们有三种方法来处理布局和内容：

回流：我们可以更改布局结构以更好地适合视口区域。大多数情况下，这会导致内容被堆叠（并不总是很好）。

调整大小：一些UI组件像大多数html元素一样易变。它们填充可用空间并在必要时进行回流。

显示/隐藏：某些UI部件从视口中隐藏（但它们仍然存在）或显示为填充该空间。

重组：通过这种方法，我们可以开发和提供不同的布局，以为特定环境（如纯触摸移动设备或混合触摸设备）提供最佳体验。

引入A + R模型

两种方法都有优点和缺点，但是如果我们想同时使用它们，会得到什么呢？的甲+ R模型结合了基于单个主要断点的响应和自适应的方法。

A代表自适应

如上所述，自适应方法使我们能够基于用户设备来区分用户体验，内容甚至功能。将960px作为主要的自适应断点（根据全局统计信息定义），我们有类似的东西：

• 左侧的视口区域代表960px以下具有特定布局/内容的所有屏幕
• 右侧的视口区域代表具有960px或更大像素以及其他布局的所有屏幕。

R代表响应式

我们定义的主要断点创建了两个可能互不相同的体验上下文，我们可以在其中应用响应技术。在每次体验中，我们都可以定义较小的断点，以根据可用空间调整布局。例如，使用平板电脑的用户可能会看到触摸优化的体验（自适应），但是我们仍然可以根据设备方向（响应）调整布局。

自适应+响应式

结合自适应和响应方法，得到了A + R模型。借助自适应技术，我们将在两种不同的情况下研究经验和功能。使用响应式组件，我们可以处理上下文内的UI组件和布局。

谁在使用此模型？

您可能会注意到，Twitter，Facebook和GitHub正在将这种模式用于其移动应用程序和网站。如果您在移动设备上浏览这些站点，则可以根据移动用户的期望来检查它们如何改变用户体验。

何时选择A + R模型

这种设计方法要求设计师真正了解他们想要提供的体验，以便定义要遵循的模型。此模型非常适合必须从功能较少或结构完全不同的小型移动设备访问的大型应用程序。如您所见，您将获得很大的灵活性，但同时也很复杂，因为您可能必须处理不同的代码库和环境（不是强制性的）。

借助A + R模型的思维方式，设计师和开发人员（以及产品所有者）可以专注于改善产品可以提供的所有体验，而不是仅在一个环境中提供“良好”的体验。