自适应与响应式网页设计

现代网站需要在每个屏幕上都具有良好的外观和功能。这不完全是新闻快报，因为网页设计师多年来一直被告知这一点。但是实现它的方法不止一种，例如自适应设计和响应式设计，我们将在本文中讨论。

当涉及到用于描述这些技术的术语时，可能会有一些混淆。与设计和开发的许多方面一样，我们被流行语所淹没。有时它们变得如此混乱以至于我们（错误地）互换使用它们。诚然，自适应设计和响应式设计都有一个相似的最终目标：确保在大屏幕、小屏幕以及介于两者之间的所有屏幕上都能提供出色的用户体验。但他们采用截然不同的方法到达那里。

今天，我们将深入研究这些差异，以帮助您为您的项目选择正确的解决方案。

什么是响应式设计？

响应式设计是这两种技术中更常用的一种，它根据浏览器大小重新排列内容。

CSS 媒体查询用于设置一个或多个断点——网站选定元素相应调整的视口分辨率。断点通常设置为模仿流行移动设备（包括手机和平板电脑）的屏幕尺寸。

一个常见的例子就是响应式导航。想想在大屏幕（笔记本电脑和台式机）上显示的全宽导航栏。随着视口缩小，可以想象菜单可以设置为调整任意数量的方式来利用可用空间。然后，在最小的移动屏幕上，相同的导航然后隐藏在“汉堡包”菜单下方。

响应式多列布局也很流行。设计师经常将它们配置为在较小的屏幕上彼此“堆叠”。在平板电脑等中型屏幕上，列可能保持原样或部分堆叠。该功能实际上内置于Flexbox等 CSS 规范中，可根据屏幕空间自动调整列。

响应式设计的优势

也许使用响应式设计技术的最大优势是用户在每台设备上获得基本相同的网站。这种连续性使常客更容易找到他们要找的东西。

此外，向 CSS 添加响应式元素相对简单。这是一个获取大屏幕上的内容并针对各种断点进行相应调整的问题。即使是在智能手机革命之前设计的旧网站也可以毫不费力地进行改造。

最后，由于给定页面的内容和 URL 在整个视口范围内都是相同的，响应式设计更适合 SEO。由于这种一致性，搜索引擎往往会更好地处理这些网站。

缺点

做出响应并不都是好消息。一些网站布局在大屏幕上可能很好，但在较小的视口上更难管理。

可能需要大量的滚动——即使这不像过去那样禁忌。此外，一些交互式或代码繁重的元素可能在手机上使用起来太慢太麻烦。

什么是自适应设计？

自适应设计，也称为“渐进增强”，是为各种屏幕尺寸创建多个固定布局的过程。从本质上讲，设计师可以为手机、平板电脑和台式机创造完全不同的体验。

这个想法是你从一些非常基本的东西开始，然后“增强”大屏幕的体验。用户拥有的屏幕空间越大，可用的附加功能就越多。

可视化自适应设计和响应式设计之间差异的一种方法：观察给定网站在桌面设备上调整网络浏览器大小时的反应。

响应式网站会在您到达特定断点时不断调整内容。列可以堆叠，容器和排版可以缩放。

有了自适应网站，就没有不断变化的布局。相反，新的断点可能会带来全新的布局——因此，甚至会带来一些潜在的内容差异。例如，一些在手机上被认为不需要的项目可能会被完全删除。

自适应设计的优势

实施自适应设计意味着真正将用户放在首位。通过为特定的屏幕尺寸打造单独的体验，设计师可以限制响应式网站经常带来的痛点。

例如，移动用户只会看到与他们相关的设计和内容元素。从理论上讲，该网站应该在较小的触摸屏上更易于浏览，内容更易于消化。

然后，随着更大的屏幕尺寸和计算能力发挥作用，这些额外的功能被添加进来。自适应设计理解网络不是放之四海而皆准的。

缺点

因为您正在创建单独的体验，所以实施自适应设计技术可能非常耗时。对于预算紧张、截止日期或两者兼而有之的项目来说，这一点尤其令人担忧。

然后还可能出现不一致的用户体验。对细节的关注在这里非常重要，因为网站需要提供独立但相似的外观、感觉和功能。在设计过程中遗漏一个细节或做出一些错误的决定可能会妨碍在一个或多个设备上使用网站的能力。

说到设备，新设备一直在发布。有些具有独特的视口，并且可以想象得到“错误”的布局。因此，可能需要进行例行检查以确保您的站点使用最新技术。

对于使用“ m.yoursite.com ”等提供仅限移动版本的网站，SEO 也是一个问题。这不会在所有情况下都发挥作用，但如果您的项目受到影响，仍然值得考虑。

选择正确的设计技术

您如何知道哪种技术最适合您的项目？在许多情况下，这可能是时间和金钱的问题。为此，响应式设计实施起来更快、成本更低。

如果您使用的是WordPress 主题等第三方产品（通常带有响应式样式），我们已经为您做出了决定。

然而，自适应设计仍然有它的一席之地。对于拥有预算和时间资源的大型网站，设计人员可以使用自适应技术为每台设备打造出色的体验。

无论哪种方式，底线是确保您的网站适合每个用户。值得庆幸的是，有两种经过高度验证的方法可以使其成为现实：自适应或响应式设计。