经常有客户问响应式布局和自适应布局有什么区别？今天就跟大家聊聊老毛前端设计程序员。首先，我们来了解一下什么是响应式布局和自适应布局。

响应式布局：

响应式布局是2010年5月提出的概念。简而言之，一个网站可能兼容多个终端——而不是为每个终端制作特定的版本。这个概念是为了解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更舒适的界面和更好的用户体验，而且随着当前大屏移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这种技术，我们不仅看到了很多创新，还看到了一些既定的模式。

自适应布局：

自适应网页设计（Web）是指使网页能够自适应地显示在不同尺寸的终端设备上的网页设计新方法和技术。

随着3G的普及，越来越多的人使用手机上网。

移动设备正在超越桌面设备，成为访问互联网最常见的终端。于是，网页设计师不得不面对一个问题：如何在不同尺寸的设备上显示同一个网页？

手机屏幕较小，宽度通常在600像素以下； PC屏幕宽度一般都在1000像素以上（目前主流宽度为1366×768），有的甚至达到2000像素。在不同尺寸的屏幕上显示相同的内容并获得满意的效果并不容易。

很多网站建设方案都是针对不同的设备提供不同的网页，比如提供专用版本，或者iPad版本。这样确实保证了效果，但是比较麻烦。必须同时保护多个版本，而一个网站如果有多个（导入），会大大增加架构设计的复杂度。

因此，有人很早就幻想是否可以“一次设计，广泛使用”，让同一个网页能够自动适应不同尺寸的屏幕，根据屏幕宽度自动调整布局（）。

制作网站时，“什么样的网站/项目适合自适应布局（固定断点）？什么样的网站适合响应式布局？（流体网格）”

实际上，响应式布局在任何情况下都比自适应布局更好，但在某些情况下自适应布局更实用。

自适应布局可以让你的设计更加可控，因为你只需要考虑几种情况就可以高枕无忧了。但在响应式布局中，您可能需要面对很多情况 - 是的，大多数情况之间的差异很小，但它们肯定是不同的 - 因此可能很难准确理解您的设计是什么。会是什么样子呢。同时，这也给测试带来了困难。你很难拥有绝对的控制权并猜测会发生什么。从另一个角度来看，这也是响应式布局的魅力所在。通过允许名义不确定性的存在，您可以实现更高水平的名义确定性。尽管您无法准确预测您的设计将如何在像素级别的×视觉区域集合中显示，但您可以确定的是它们将被很好地显示——表面特征和布局结构都是有序的。

自适应布局有其自身的优势，因为它们的实施成本更低且更易于测试，这通常使它们成为更实用的解决方案。自适应布局可能被视为响应式布局的“穷弟弟”，在资源有限的情况下可能会使用它。这在改进现有网站时特别有用，因为在现有网站中完全重写代码是不可行的。在这种情况下，采用自适应布局是一个很好的起点。

其实无论采用哪种设计理念，都有各自的优点和缺点，还是要根据个人的实际情况做出选择！

NEW老猫软件一键原创短视频去重工具现已上线！热销中，畅销款~