这是一个比你想象中更频繁出现的问题。我们不时地在 CSS-Tricks 论坛 中看到它。这也是我在教授网页设计入门课程时经常被问到的问题。
这是一个好问题！
自 Ethan Marcotte 于2010年在 A List Apart 上提出响应式网页设计 以来，响应式网页设计已成为一个家喻户晓的术语；以至于我们可能会认为自己对它的理解是理所当然的。响应式网站的概念是 CSS 最棒的“技巧”之一，并且足够重要，值得我们退一步，提醒自己是什么构成了“响应式”网站，以及它与“自适应”网站的不同之处。
因此，让我们来探讨一下它们的区别。
简短解释
响应式网站和自适应网站的共同点在于，它们都会根据其正在被查看的浏览器环境（最常见的是浏览器宽度）来改变外观。
响应式网站响应浏览器在任何给定时间点的尺寸。无论浏览器宽度是多少，网站都会以一种针对屏幕优化的方式调整其布局（以及可能的功能）。浏览器宽度是300px还是30000px？这并不重要，因为布局会相应地做出响应。当然，前提是它被正确地实现！
查看 CSS-Tricks 在 CodePen 上创建的笔 响应式示例（@css-tricks）。
自适应网站适应浏览器在特定点的宽度。换句话说，网站只关心浏览器是否具有特定的宽度，并在达到该宽度时调整布局。
查看 CSS-Tricks 在 CodePen 上创建的笔 自适应示例（@css-tricks）。
另一种思考方式是平滑设计和捕捉设计的区别。响应式设计是平滑的，因为无论在什么设备上查看，布局都会流畅地调整。另一方面，自适应设计会捕捉到特定位置，因为页面根据其正在被查看的浏览器或设备提供不同的内容。此动画演示了行为的差异
请注意，响应式示例如何随着环境变化而变化，而自适应示例则在定义的环境中捕捉到特定位置。
详细解释
响应式网站和自适应网站的区别比上面的简单示例要深一些。你甚至可以将其视为哲学上的差异。
让我们考虑一下 Ethan 对响应式网页设计的最初定义的核心内容
流体网格、灵活的图像和媒体查询是响应式网页设计的三个技术要素，但它也需要一种不同的思维方式。与其将我们的内容隔离到不同的、特定于设备的体验中，我们可以使用媒体查询在不同的查看上下文中逐步增强我们的工作。
请注意关键词流体和灵活。响应式设计是一种实现设备无关性的方法，因为它旨在为任何屏幕创建优化的体验。这种思维方式促使我们创建能够根据网站在任何给定时间被使用的方式来改变上下文的网站。这意味着我们的容器应该是流体的（例如使用百分比作为单位），我们提供的内容应该是灵活的（例如在正确的时间向正确的设备提供正确的内容），以及我们定义内容断点的位置（而不是特定屏幕尺寸的宽度，例如 iPhone）。
将其与自适应的思维方式进行比较，自适应的思维方式既不流体也不灵活，而是寻找特定点进行调整。虽然很难让网站适应所有各种设备，但你可以参考 设备特定媒体查询的汇总。
更新：关于响应式设计和自适应设计区别的讨论非常精彩。重要的收获是，区别不仅仅在于媒体查询和像素单位。帖子前面动画 GIF 示例是说明这些术语在此处如何被识别的一种方式，但 这篇文章 还提供了一系列很好的插图，进一步说明了这一点。
响应式设计是否优于自适应设计？
我甚至不想讨论这个问题。我相信这是一种哲学差异，就像响应式网页设计与 移动优先响应式网页设计 的区别一样。你选择最适合当前项目的工具。
你是否被迫选择其中一个？如果你知道你的网站必须支持哪些特定设备，那么选择可能会更容易。你可能会决定 iPhone 6 是唯一重要的设备，并且适应它比考虑其他设备要容易得多，也更有效率。另一方面，响应式设计是使网站免受市场上任何（甚至可能尚未发布的）设备影响的良好策略。
底线
响应式设计和自适应设计都旨在解决网站经常在不同设备和不同上下文中被查看的事实。它们只是以自己的方式来解决这个问题。
请记住：网络本质上是响应式的。在我们开始设计它之前，它不需要响应或适应任何设备。
如果你想深入了解响应式设计，最好的方法是实践。有很多资源可以帮助你入门，所以开始吧！以下是一些入门资源
- 这就是响应式：Brad Frost 策划的一系列示例、模式和资源。
- ResponsiveDesign.is：除了文章和播客之外，还有一个宝贵的资源库！
- 响应式网页设计播客：说到播客，这里有一个由 Ethan Marcotte 和 Karen McGrane 联合主持的播客。
- 响应式网页设计，作者：Ethan Marcotte：Ethan 撰写了关于此主题的书籍，并且表达得非常清晰。
哦，天哪……这篇文章有点跑偏了。
响应式设计可以是流体的，也可以是固定的，自适应设计也是如此。区别在于响应式设计不关心使用的是什么浏览器，它响应浏览器大小并相应地重新调整布局。
另一方面，自适应设计适应特定的浏览器环境，并且可能考虑也可能不考虑浏览器当前的大小。
它本质上是媒体查询（响应式）和设备检测（自适应）之间的区别，尽管在仅使用 CSS 的领域，它更像是使用
@media (min-width: X)（响应式）与@media (min-device-width: X)（自适应）。https://mdn.org.cn/en-US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design 比我表达得更好。
很高兴我不是唯一一个觉得这篇文章奇怪/错误的人。
是的，你是对的。
是的，zzzzBov，你是对的，我读了这篇文章，感觉自己迷路了。
正如你指出的那样，响应式可以是固定的或流体的，这篇文章并没有真正说明清楚。
这是一个有趣的反馈！
虽然我同意在描述两种方法之间的区别时存在差异，但这听起来更像是你所描述的自适应设计更接近于 响应式服务器端 (RESS) 的定义。
我不同意这一点，并将再次引用 Ethan 对响应式设计的定义
响应式设计没有什么是“固定”的。它应该在所有条件下都保持流畅。是的，响应式和自适应设计都可以（并且经常）使用媒体查询。自适应设计中缺乏相对单位度量是造成差异的原因，导致了固定、突兀的自适应行为。
至少这是我的看法。这里提出的观点都很有道理，但我认为对响应式设计的基准定义存在误解（或者可能是理解上的差异）。
这始终是我对这两者的理解。响应式对环境无动于衷，而自适应则因环境而改变。
Geoff，我认为你可能对zzzzBov所说的话理解得太字面了。
如果一个布局在达到某个点之前具有固定宽度，然后变得流畅，这是否违反了规则？
根据我阅读的内容，你所说的自适应和RWD之间唯一区别是缺乏流体网格。
我看到这个问题一次又一次地出现，显然Ethan正式创造了“响应式网页设计”一词，Luke Wroblewski创造了“RESS”一词，但实际上是否有人创造了“自适应网页设计”一词并已保留了该词？
我感到困惑。你展示的例子在我看来像是响应式设计的不同形式。
为什么这种区别很重要？我应该根据这种区别做出哪些决定？我应该何时选择其中一个而不是另一个？
这篇文章似乎只是引入了新术语，说“不要混淆！”，却没有解释为什么它很重要。
嘿，感谢你的参与！
好问题。区别在于一个版本（响应式）使用相对单位（例如百分比）来使其布局流畅地响应任何浏览器/设备条件。另一个版本（自适应）使用固定单位（例如像素）来适应特定条件。
我不确定这篇文章是否试图说“不要混淆！”，而是承认这种差异很容易且经常被误解，并试图（在这种情况下可能没有效果）来区分它们。
我根本不会这样描述“自适应”设计。我不知道这从哪里来的，但我认为自适应描述的是适应页面正在渲染的设备的上下文。例如，平板电脑设备上的更大按钮。平板电脑可能与台式机的屏幕分辨率相同，但台式机不需要大的可触摸按钮，而平板电脑则需要。
我认为这就是“适应”的含义。
这绝对是等式的一部分，我认为我们基本上在说同一件事：自适应设计会根据其提供的特定环境（即浏览器条件、设备等）将设计固定到位，而响应式设计则会平滑地提供优化的体验，无论环境是什么。
因此，是的，响应式和自适应设计都可以为更大的屏幕提供更大的按钮。但是，自适应设计将根据特定的浏览器或设备条件确定这些按钮的大小，以便它可以相应地进行调整。
我也这么认为，并且我对这篇文章感到困惑。
在我看来
响应式是在流畅或突兀的方式下，对浏览器大小做出响应的相同布局。
自适应也是如此，但它也适应用户与网站交互的方式。就像你说的“触摸设备上的更大按钮”。但是这种自适应方式也可以是流畅或突兀的。
但是，我喜欢我们称之为“自适应”的方式。为触摸设备更改按钮大小等。;) 无论你想给它起什么名字 :)
当我在2011年尝试自己解决这个问题时，我遇到了一些文章，其内容基本上与这篇文章中概述的定义一致
忘记响应式网页设计
响应式和自适应网页设计：定义
响应式设计。我不认为这个词的含义是你认为的含义。
响应式网页设计揭秘
然后Brad Frost在2013年发表了一篇文章，完全颠倒了这些定义：“自适应设计”被定义为创建适应用户需求和能力的界面的广泛的、总括性的术语，“响应式设计”则是该总括性术语下的一个特定技术。
因此，在这一点上，我同意Rob Lang的说法，即现在尝试争论这种区别并没有什么用处。
如果我们采用这篇文章对“自适应设计”的定义，那么自适应设计将不再是现代网页设计中的一种可行方法。视口尺寸实在太多了，无法挑选和定位。
如果我们采用Brad Frost的定义，或者这篇文章中其他备选定义之一，它就会变成一场关于语义的微妙而永无止境的争论。
但归根结底，我们都对响应式设计有相当好的理解。我说让我们让自适应设计作为术语逐渐消失。
非常棒的想法和链接！我对响应式网页设计讨论的总体看法是，它正在发展，尤其是在我们的工具得到改进和设备发生变化时。
https://mdn.org.cn/en-US/Apps/Design/UI_layout_basics/Responsive_design_versus_adaptive_design将其描述为
这更接近我如何理解自适应设计的。
我认为自适应和响应式之间的区别最好用liquidapsive.com来演示……本质上：响应式 = 流畅 + 自适应（或者也许响应式 = 流畅 x 自适应！）。
是的，我同意Andrew的观点：http://www.liquidapsive.com/
@zzzzBov 你想到的是RESS（响应式服务器端），但是我也听到过在那种情况下使用“自适应”一词。
我的理念是在较小的尺寸下使用流畅断点，然后在较大屏幕尺寸下变成自适应固定尺寸。这节省了大量的测试工作，并且设计看起来更好。
这是一个很好的理念！的确，大型屏幕的市场在某个点上会减少，而小屏幕尺寸的设备和功能数量却非常庞大。
这个行业的术语和行话往往会改变含义或演变成几乎完全不同的东西，例如，前端开发人员的不断变化的定义。
我认为Brad Frosts的文章自适应设计的多种面貌很好地解释了自适应和响应式设计，并且将“自适应布局”一词描述为固定宽度的方法。
我们只需要抛弃所有名称和术语，并创建一个社区维基来定义每一个术语。
看来这里有机会重新定义这些术语，使它们更清晰。为什么不使用“流畅”或“全响应式”和“分步响应式”来表示本文中的示例呢？
这两个示例都对媒体宽度的变化做出响应，因此它们是“响应式”。一个是持续响应，因此是“流畅”或“完全”响应式，另一个是分“步”或“层”响应。
Bootstrap的
.container和.container-fluid就是一个简单的差异示例。至于自适应，我将其描述为一种“一次运行”类型的响应式。也就是说，当网站加载时，服务器或客户端会确定应该使用哪个布局，从而确定初始浏览器宽度或设备类型，并选择要显示的网站版本。
我同意这里大多数评论者的观点，他们认为这篇文章有点跑偏了。在我看来，Brad Frost的文章更好
http://bradfrost.com/blog/post/the-many-faces-of-adaptive-design/
显然，这里存在一些混淆。
响应式 = 网站响应浏览器大小调整，仅此而已。“在任何给定时间点”部分是从哪里来的？我感觉这部分是故意添加的，只是为了有一个区分响应式和自适应的点（“自适应在特定点适应”，这是什么意思？）。
Mozilla 正确地解释了这些概念，如上面链接所示，在我看来。
此外，当对象可以互换并且听起来仍然完全正确时，你就知道你的区分存在缺陷。
响应式网站在任何给定时间点都适应浏览器的大小。
自适应网站在特定点响应浏览器的宽度。
明白我的意思了吗？
引用一下编写自适应设计书籍的那位作者的话
“需要说明的是，我认为区分“自适应网页设计”和“自适应布局”很重要，因为“自适应布局”只暗示使用媒体查询，而这可能不会以渐进增强的方式完成。”
http://blog.easy-designs.net/archives/on-adaptive-vs-responsive-web-design/
我认为你的博文更准确的标题应该是“响应式和自适应布局的区别”。
从终端用户的角度来看，响应式设计和自适应设计之间是否存在差异？大多数用户不会注意到设计在不同浏览器宽度下是“捕捉”还是“流动”，因为大多数用户不会更改浏览器宽度，除非他们在网络行业工作。
例如，用户在手机上查看网站，然后在电脑上完成操作，他们永远不会看到“流动”或“捕捉”的变化。他们会看到一个在两种设备上都能正常工作的网站，该网站已经响应并适应了他们的不同设备，然后在他们需要使用下一个网站时就会忘记它。
是的！我也有同样的想法。我完全同意。
我完全同意。谁在乎它是否捕捉？重要的是页面在任何屏幕尺寸和任何设备上看起来都很好并且可用。
对于小型网站或只有几个可能的页面布局的网站，可能能够手工制作媒体查询以实现完美的流畅性。但对于大多数网站来说并非如此——而且确实不具有未来证明性。
就像我们不知道下一代设备会是什么样一样，我们对一年后内容的需求了解得更少。
我认为响应式设计和自适应设计之间确实存在区别。这种差异应该对终端用户来说是显而易见的。在我看来，“响应式”使其完美适配（即使你调整大小/旋转），而“自适应”则根据设备呈现不同的功能和行为。自适应是设备和功能检测。响应式是视口检测。
*除了“检测”之外，我的意思是“依赖”:)
好吧，也许大多数用户不会想“等等，这应该是响应式，而不是自适应！”，但他们很可能会受到内容无法充分利用自适应网页设计中容器周围（有时很宽）边距中隐藏的空间的影响。此外，他们可能会旋转手持设备——调整大小就在那里发生。
在多元化且不断发展的设计社区中，使用通用术语来定义特定的技术特性是不幸的。无论如何，我的解释，在字典定义的一些帮助下
流畅 - “与易于改变形状的物质有关；能够流动。” - 即使用相对大小而不是固定大小。可以应用于固定大小的浏览器体验，其中扩展某些内容会导致现有内容围绕它流动。
自适应 - “以适应为特征或被赋予适应性：'突变对于所有种群的自适应进化最终都是必不可少的'” - 即具有特定的变化，可能包括形状，但也根据设备类型“改变”内容。
响应式 - “快速积极地做出反应” - 即对环境的变化做出“流畅”或“自适应”的反应，例如浏览器大小调整。我不同意 Karl Brown 提出的观点，因为用户确实会更改浏览器大小。小型设备用户更改方向，桌面用户有时确实会在非全屏（提醒我该术语）运行并在打开几个应用程序时调整窗口大小。个人轶事：如果我正在阅读一篇很长的评论文章，我通常会缩小浏览器宽度以使阅读更容易。
我认为作者对这些概念理解错误，并且使事情变得非常复杂。
首先，响应式不必流畅。响应式是通过依赖 css 媒体查询来更改页面样式的功能（有些也使用 js 来实现这一点）。你可以使你的网站流畅或不流畅，因为这只需要将长度定义为百分比或像素。
自适应是通过在服务器端检测设备来更改实际的 html（以及由此产生的加载的 css、js 和其他资源）。基本上，你根据设备类型提供不同的优化页面。
因此，响应式、自适应和流畅都可以同时在你的网站上运行。
响应式更受欢迎，因为它更容易。像 WordPress 或 Joomla 这样的流行 cms 并不方便构建自适应网站。在大多数情况下，它实际上并不是必需的。如果你的网站或应用程序足够复杂以至于需要自适应，那么你可能具备解决这个问题所需的开发水平。
这真的重要吗？
重要的是网站的终端用户，只要设计和功能在不同设备上保持一致，并且用户体验和下载速度良好，终端用户就不会在乎它是响应式还是自适应。他们可能根本不知道它指的是什么。
我创建的大多数网站以及我访问的大多数网站实际上似乎将响应式和自适应的元素结合到一个整体的混合设计形式中。
在阅读了这里的一些评论后，我认为这篇文章/主题有很多误解。
许多评论者将自适应设计视为一种使设计“适应”其上下文的方式。这意味着桌面网站上的按钮可能比移动版本上的按钮更小，填充更少。网站被查看的上下文需要“适应”用户以及他们如何使用网站。我同意这个观点。
但是，在这篇文章中，似乎提出的要点是自适应和响应式在网站物理分解方式上的区别。它们是捕捉到特定的屏幕尺寸（自适应）还是在设计崩溃时分解（响应式）。
总而言之，我相信无论你选择如何引入媒体查询，都应该考虑网站功能方面的“自适应”要点。
完全正确。感谢你阅读这篇文章并注意到书面内容和评论中讨论内容之间的区别。
然而，如果你像 Aaron Gustafson（自适应网页设计作者）那样看待它，响应式网页设计是自适应网页设计的一个子集。
AWD仅仅是渐进增强的另一个说法，其中 RWD 通常是不可或缺的一部分。
这是我更喜欢使用“自适应网页设计”这个术语的方式，但关于该主题的大多数文章经常将 RWD 与 AWD 讨论，就好像它们是不同的东西一样。就像这篇文章一样。
我也知道自适应网页设计是这里描述的技术。我也理解 Goldilocks 与此相同：http://goldilocksapproach.com/
无论名称如何，它都是处理一行中固定大小组件的一个不错的选择——例如，如果你想要（无论出于何种原因）始终以正好 Xpx 的宽度和 Ypx 的间距显示图像库：一旦你有足够的空间添加另外 1 或 2 个项目，请调整容器的宽度以允许将这些项目添加到该行。
这似乎是模拟/数字。由于阈值而改变或在每一刻改变。
这是我在这里比以往任何时候都更常听到的响应式和自适应的定义。在我看来，响应式的定义通常非常清楚，因为 Ethan Marcotte 编写了一本关于该主题的权威书籍。混乱总是出现在“自适应”一词的定义上。我听到过一些含义
1- 使用设备检测的独立移动网站
2- 响应式网页设计减去流畅网格和灵活图像（因此只有媒体查询）
3- RESS 定义
当我和工作中或聚会上的人交谈时，他们说“自适应”，我总是问他们“自适应”是什么意思，因为我们每个人都有不同的定义。我尽量避免在我的词汇中使用这个词。很棒的文章，感谢你的澄清。
流行的例子可以是 - https://m.facebook.com（自适应）和 https://facebook.com（响应式）。
但是截图（顶部是响应式，底部是自适应）有点令人困惑。当然，你可以将
@media与PX一起使用，但在 RWD 中使用%更好。在我理解中，这篇文章的作者理解错了。自适应设计和响应式设计之间的核心区别在于，自适应设计只向特定设备发送该设备所需的元素和内容。而在响应式设计中，所有内容（针对所有设备）都会发送（从服务器到客户端）。这就像我点披萨时，整个比萨店都跑到我家门口，而不是只送来我点的比萨。自适应设计克服了响应式设计的这个“先天缺陷”，而这个缺陷正是近年来代码膨胀的罪魁祸首。智能的自适应设计利用响应式设计技术进行前端处理调整，但可以避免设备处理大量不需要的素材（客户端请求的）。
@Harald 我认为你理解错了：不是说你不能按照任何你想要的方式定义自适应设计，而是作者显然有其他的定义在脑海中——自适应设计并没有一个明确的定义。
但更重要的是，RWD 几乎不负责代码膨胀：你的 CSS 文件大小会略有增加（并且，根据你的具体技术，你的标记中可能会使用一些额外的类），但在大多数情况下，这几乎无关紧要。真正会产生很大影响（尤其是在 RWD 中）的是自适应图片——在 320×480 的屏幕上只发送最大 480x480 的图片，而不是原始的 2MB 图片！
@Geoff，仅供参考，我认为你的观点非常正确。术语周围存在太多混淆，特别是“响应式”。它可以指代很多东西。你发布了一篇文章围绕其中一个含义，并因此遭到了一些使用该词来指代其他含义的人的抨击。
我非常喜欢你的文章，我打算向我的朋友推荐它。我甚至想使用你展示差异的动画 GIF。如果你同意的话，我可以署名转载吗？
看起来这篇文章不仅没有澄清差异，反而增加了混乱，部分原因是最初的术语选择非常糟糕。尽管如此，我基本同意作者的观点，以下是我学习这些术语的方式
响应式：布局（主要是布局，但也可能是其他东西，如字体大小）会响应任何视口大小。对我来说，这并不一定意味着媒体查询，但通常会使用。设置为宽度为 100% 的表格是响应式的，在任何视口大小下都是如此。根据官方定义，它只是流动的，而不是响应式的，但我不同意，因为没有断点的流畅设计会响应任何视口大小。在此整体流畅方法中的断点是为了在特定点优化布局和其他内容。
自适应：布局（和其他内容）仅在特定的断点处响应（令人困惑的术语），而在断点之间不响应。在断点之间调整大小可能只会添加空白。自适应设计的另一种解释是，实际功能可能会在自适应断点处发生变化，每个断点都有非常不同的设计。
这是我的理解。并且为了增加混淆：混合场景是可能的。
这是一个非常好的主题分享。你通过写作很好地区分了这两者。非常感谢。
在重新设计《华尔街日报》时，我们创建了一个带有断点的网格来捕捉设计。我们使用了媒体查询。因此，捕捉完全是一个设计选择，如果你曾经与编辑合作过，就会知道他们在文本流方面非常挑剔。动态文本可以做各种可能被忽略的事情。无论哪种方式，那个 GIF 都是错误的。
http://www.wsj.com/news/politics
看看该网站是如何捕捉的，它有 4 个断点。所有媒体查询都使用一个可以移动 DOM 中内容的 js 库。
只是说说而已。
关于此主题的大多数讨论都是无用的。
因为“适应”=“响应”。这是两个表示同一事物的词。所以人们试图赋予它们不同的含义，以便它们可以共存。
但实际上，响应式设计是自适应的，反之亦然。因为它们本质上是一样的。
这些词是新词，这就是为什么我们难以定义它们的原因。但花太多时间试图以自己的方式定义它是一种浪费时间。
就像我在本文中看到“流畅或灵活”这样的句子一样。好像它们不是一回事。如果你想继续浪费时间定义，请定义：液体设计、相对设计、基于比例的设计。或者只是理解它们都一样。
最初的理念是需要记住的（Ethan Marcotte 的原始定义）。
其余的，仅仅是“细节”。这是你如何实现理念的方法。我使用媒体查询吗？（捕捉设计）或者我让该元素适合其容器？（“弹性”或任何你称之为它的东西）。
在实际案例中，你不能简单地说“让我们使用响应式！哦，不，使用自适应！”因为根据本文给出的定义，大多数情况下，在实际案例中，你必须将两者结合使用。
问题在于人们从错误的范式出发。他们讨论技术就像在讨论理念一样。响应式网页设计 (RWD) 是 Ethan Marcotte 创造的理念，但其他所有内容都是用于实现该理念的技术。不要陷入这些文字问题。
致 Chris Coyier：我很乐意有机会在一篇详细的文章中阐述这个观点，我已经处理这些主题很长时间了，我还有很多话要说，请告诉我这是否可能。
有两种类型的 AWD
客户端类型：本文讨论的就是这种类型。
服务器端类型：Luke Wroblewski 和 Aaron Gustafson 讨论的就是这种类型：响应式服务器端 (RESS)。基本上，来自服务器的渐进增强。
老实说，我都可以接受。
归根结底，我们使用哪种 AWD 技术对我们的网站并不重要，我们只需要确保为我们的访客和用户提供最佳的 UX 即可。就是这样。
Geoff，精彩的阅读。+1