当我们设计网站和软件应用程序时，需要考虑许多支持互联网的设备。我们大多数人都熟悉“响应式设计”这个术语，这是一种确保我们的网站和应用程序可以跨这些不同设备访问的方法。
但响应式设计并不是为您的网站或应用程序提供服务的唯一方法，而且它并不总是适用于所有情况 - 特别是对于我们今天看到的更复杂的网页布局和趋势。这就是“自适应设计”的用武之地，也是您在下一个网页设计项目中考虑使用它的原因。
响应式设计和自适应设计之间的主要区别
响应式设计
通过响应式设计，我们正在设计一种单一的布局，该布局将服务于可能查看我们网站的所有不同可能的设备。然后，使用称为“媒体查询”的 CSS 代码，我们可以定义某些断点（通常是您的浏览器大小可能的标准 6 个不同尺寸），以确保某些 UI 元素堆叠或缩放，以适应该设备的可用空间或浏览器的视口。因此，无论您在移动设备还是桌面设备上，您都会看到相同的内容和 UI 元素（有一些轻微的定位调整或折叠元素）。
自适应设计
相比之下，自适应设计涉及为正在服务的每个设备创建特定的预定义布局和模板。例如，使用自适应设计方法的新闻网站可能有一个针对桌面用户的主页模板，另一个针对平板电脑的主页模板，以及针对智能手机的完全不同的模板设计。每个模板布局可能非常不同，并允许您根据访问的设备添加、删除或显示完全不同的 UI 元素。这种方法需要更多的工作和代码，但可以对设备上显示的 UI 提供更多控制，以获得更定制的体验。
什么时候使用哪个？
问题出现了：为什么选择自适应方法而不是响应式方法？尤其是当自适应设计看起来如此劳动密集型时？嗯，这取决于项目的背景。
自适应设计通常更适合复杂的软件和本机 Web 应用程序。例如 iOS 应用程序、Android 应用程序和桌面应用程序。例如，Garageband、Notion、YouTube 和 Facebook 采用自适应设计来根据您安装的设备提供特定的体验，您甚至可能会注意到某些功能在某些平台上有所不同或不可用。如果您希望在移动浏览器上查看非常复杂的网站布局、图形或动画，并希望完全更改、缩小或删除这些内容，那么您也可能会在网页设计中看到这种情况。
自适应设计真正擅长的另一个场景是改造现有网站，使其更适合移动设备查看。我们都见过它们，那些主要通过网络浏览器访问的旧的大型新闻网站或门户网站。尝试在移动设备上使用它们，但它们无法正确加载或出现这种可爱的额外横向滚动效果。更新需要重新设计和重新编码整个网站以使其具有响应能力，因此您可以选择一种自适应方法并设计一个全新且适当简化的网站版本，该版本仅提供给在移动设备上访问该网站的用户，而无需必须触摸主网站。在这种情况下，它实际上比重做整个网站或应用程序要少得多。
整体比较
这里有一个快速列表，可帮助您确定哪一个最适合您的项目。
自适应设计用例
自适应设计方法使设计人员和开发人员能够更精细地控制特定设备上的显示内容和方式。
- 更适合复杂的网站
- 非常适合本机软件和特定于平台的应用程序
- 通常，需要更多代码
- 通常需要更多维护
- 对于需要达到当前标准和最佳实践的旧网站来说可能很经济
响应式设计用例
响应式设计方法使设计人员和开发人员能够确保无论用户在其网站上使用什么设备或浏览器，都可以加载并查看其网站，而无需创建多个布局或版本。
- 当今大多数简单的网站和基于浏览器的应用程序都是采用响应式方法设计的
- 当灵活性优先于特定于平台的优化时最有用
- 对于较新的站点，通常涉及较少的代码和较少的维护
- 对于需要在某些设备或屏幕尺寸上进行重大更改的复杂设计或交互不太有用
流体设计注意事项
最后一点，您可能还听说过流体设计，这实际上只是响应式设计的一个子集，就响应式设计的实现方式以及拖动和缩放以实时调整浏览器大小时会发生什么而言。在响应式设计中，我们使用像素值来确定断点，而在流体设计中，我们使用与其他 UI 元素相关的百分比比率来确定在定义的断点“之间”发生的情况。这只是有助于更多地利用数学，让浏览器确定事物应该如何缩放，而不是我们通过像素来定义它。