响应式和自适应网页设计都是创建多设备友好型网站的方法，这些网站适用于各种屏幕尺寸。虽然谷歌推荐了响应式网页设计，并且这两种方法中更受欢迎，但这些用于多设备网页设计的方法都有其优点和缺点。
让我们来看看响应式和自适应网页设计之间的差异，特别关注这些关键领域：
- 易于开发
- 您对设计的控制程度
- 设备/屏幕支持的广度
- 解决方案未来的友好程度如何
- 整体下载速度和网站性能
一些定义
在我们进行响应式和自适应网页设计的并排比较之前，让我们花一点时间来看看这两种方法的高级定义。
响应式网站具有流畅的布局，无论使用何种屏幕尺寸，它都会发生变化和适应。如果调整浏览器大小，媒体查询允许响应式网站甚至更改“飞行”。
自适应设计使用基于预定断点的固定大小，为页面首次加载时检测到的屏幕大小提供最合适的布局版本。
有了这些广泛的定义，让我们转向我们关注的关键领域。
易于开发
响应式和自适应网页设计之间最显着的区别在于这些解决方案应用于网站的方式。由于响应式设计可以创建完全流畅的布局，因此最适合用于从头开始重新设计站点的项目。试图改造一个现有的网站，代码变得响应通常是一个艰苦的事情，因为如果你从头开发代码并在最早的阶段考虑响应设计，你根本就没有控制水平。那个过程。这意味着当您对站点进行改造以进行响应时，您将被迫做出妥协以保持在现有代码库中。
如果您正在使用现有的固定宽度网站，则自适应方法意味着您可以保留网站设计完整的大小，并根据需要添加其他自适应断点。在某些情况下，如果一个项目，预算很小，并且它只能容纳少量开发工作，您可以选择仅为较小的屏幕/移动设备中心大小添加新的自适应断点。这意味着您可以允许更大的屏幕使用相同的布局 - 也许是960断点版本，这是该网站最初可能设计的版本。
自适应方法的优点是您可以更好地利用现有站点的代码，但缺点之一是您要为您选择支持的每个断点创建不同的布局模板。这将对长期开发和维护此解决方案所需的工作量产生影响。
设计控制
响应式网站的优势之一是它们的流动性允许它们适应和支持所有屏幕尺寸，而不是仅采用自适应方法确定的预设断点。然而，现实情况是，响应式网站在某些关键屏幕尺寸（通常是与市场上可用的流行设备相对应的尺寸）上看起来很棒，但是视觉设计经常在这些流行的分辨率之间分解。
例如，一个网站在1400像素的宽屏幕布局，960像素的中间屏幕尺寸和480像素的小屏幕看起来可能看起来很棒，但这些尺寸的中间状态呢？作为设计师，您几乎无法控制这些中间尺寸，并且这些尺寸的页面的视觉外观通常不太理想。
使用自适应网站，您可以对所使用的各种布局进行更多设计控制，因为它们是基于您建立的断点的固定大小。那些尴尬的中间状态不再是一个问题，因为你已经精心设计了每一个，即（即每个断点的显示）将传递给访客。
尽管这种设计控制水平听起来很有吸引力，但你必须意识到这是有代价的。是的，您可以完全控制每个断点的外观，但这意味着您必须为每个独特的布局投入设计所需的设计时间。您选择设计的断点越多，您需要花费的时间就越多。
支持的广度
响应式和自适应网页设计都得到了非常强大的支持，尤其是在现代浏
自适应网站需要服务器端组件或Javascript来检测屏幕大小。显然，如果自适应站点需要Javascript，则意味着浏览器需要启用它才能使该站点正常工作。这可能不是你的一个主要问题，因为大多数人会在他们的浏览器中使用Javascript，但是任何时候网站都对任何东西都有重要的依赖性，应该注意。
响应式网站和支持它们的媒体查询将在所有现代浏览器中都能很好地运行。您将遇到的唯一问题是最旧版本的Internet Explorer，因为版本8及更低版本不支持媒体查询。为了解决这个问题，经常使用Javascript polyfill，这意味着这里也存在对Javascript的依赖，至少对于那些过时的IE版本。同样，这对您来说可能不是很重要，特别是如果您的网站分析显示您没有收到使用这些旧浏览器版本的许多访问者。
未来的友善
响应式网站的流动性使其在未来友好性方面优于自适应网站。这是因为这些响应式站点不是为了仅容纳先前建立的断点集而构建的。他们适应健康 所有屏幕 ，包括那些今天可能不在市场上的产品。这意味着如果新的屏幕分辨率突然变得流行，响应式网站将不需要“修复”。
看看设备领域令人难以置信的多样性（截至2015年8月，市场上有超过24,000种不同的Android设备），拥有一个尽力适应这种广泛屏幕的网站对于未来的友好性至关重要。这是因为未来景观不太可能变得多样化，这意味着如果我们尚未达到这一现实，那么设计特定的屏幕或尺寸将变得不可能。
在此比较方案的另一方面，如果站点是自适应的并且它不适应可能在市场中变得重要的新分辨率，那么您可能被迫将该断点添加到您创建的站点上。这增加了项目的设计和开发时间，这意味着必须对这些自适应站点进行持续监控，以确保不会在市场中引入必须添加到站点的新断点。同样，随着设备多样性的存在，不得不经常检查新的尺寸并且可能使用新的断点来容纳它们是一项持续的挑战，这将对您必须支持站点的工作和维护的成本产生影响。该网站所针对的公司或组织。
性能
从下载速度/性能的角度来看，响应式网页设计长期以来一直被指责（在许多情况下是不公平的）。这主要是因为在这种方法的早期，许多网页设计师只是将小屏幕媒体查询添加到网站的现有CSS上。这迫使用于较大屏幕的图像和资源被传送到所有设备，即使那些较小的屏幕没有在它们的最终布局中使用它们。自那时起，响应式设计已经走过了漫长的道路，现实情况是，今天的质量响应站点不会遇到性能问题。
缓慢的下载速度和臃肿的网站不是响应式网站问题 - 这是一个可以在所有网站上找到的问题。图像太重，来自社交媒体，过多的脚本等等，并且会压缩网站，但响应和自适应网站都可以构建为快速加载。当然 , 它们也可以以不使性能成为优先级的方式构建，但这不是解决方案本身的特征，而是对站点本身开发所涉及的团队的反映。
超越布局
自适应网页设计最引人注目的一个方面是，您不仅可以控制设置断点的站点设计，还可以控制为这些站点版本提供的资源。例如，这意味着视网膜图像只能发送到视网膜设备，而非视网膜屏幕可以获得文件尺寸更小的更合适的图像。其他站点资源（Javascript文件，CSS样式等）只有在需要时才能智能地提供并将被使用。
自适应网页设计的使用远远超出了“如果您正在改造网站，自适应可能是一种更容易使用的方法”的简单方程式。所有网站，包括完整的重新设计，都可以从更智能的方法中获益，获得更加个性化的体验。
这种情况表明了这种“反应性与适应性”辩论的细微差别。虽然自适应方法确实比对站点改造的响应更合适，但它也可以是完全重新设计的一个很好的解决方案。同样，在某些情况下，可以将响应式方法添加到现有站点的代码库中，从而为该站点提供完全响应式方法的所有好处。
哪种方法更好？
在响应式和自适应式网页设计方面，没有明确的“赢家”，尽管响应当然是更受欢迎的方法。事实上，“更好”的方法取决于特定项目的需求。此外，这不一定是“任何/或”情况。有许多网站专业人员正在构建网站，将最佳的响应式网页设计（流畅的宽度，未来支持）与自适应设计的优势（更好的设计控制，智能加载网站资源）相结合。
通常称为RESS（带服务器端组件的响应式Web设计），这种方法表明确实没有“一刀切”的解决方案。响应式网页设计和自适应都有自己的优势和挑战，所以你需要确定哪一个最适合您的特定项目，或者如果混合解决方案最适合您。
