响应式布局与自适应布局的区别到底是什么？

响应式布局与自适应布局最本质的区别是一个调整页面布局，一个调整页面内容。在同一个显示屏幕尺寸下，使用响应式布局的页面会调整页面的布局方式甚至是页面元素内容的呈现效果，确保为用户提供舒适的使用体验；而使用自适应布局的页面会通过使用调整页面内容位置排列和尺寸大小的办法，来使得页面充分贴合显示屏幕的大小尺寸，并不会发生页面布局变化。接下来，为了更清晰直观地说明这二者的差别，本文会使用图文的方式配合相关页面案例为大家解释说明，并提供一些使用页面资源，供大家上手操作感受，接下来，就一起来看看吧！

1、响应式布局在页面中的表现

• 布局特点：当显示屏幕尺寸发生变化时，页面中的布局方式甚至是页面元素内容的呈现效果都会发生改变。
• 设计方法：媒体查询+流式布局
• 案例展示：在以下这张案例图中，可以很明显的看到，对于同一组页面信息，使用了响应式布局的页面在网页端中和在移动端中呈现的页面效果并不相同，其中最明显的差别就是导航栏的设计。在网页端，页面中的导航栏将自动匹配显示屏幕的大小尺寸，根据显示屏幕的大小尺寸来调整导航栏的宽高和导航栏中文字信息的间距以及排列方式；而在移动端，为了适应移动端的屏幕大小，导航栏以“伸缩导航”的形式展现。用户在使用时，需要通过“点击”动作展开导航栏信息。

2、自适应布局在页面中的表现

• 布局特点：当显示屏幕尺寸发生变化时，页面中元素内容的位置排列尺寸大小会发生变化。
• 设计方法：创建多个静态布局
• 案例展示：从下面这组页面案例中可以看住，当显示屏幕的大小尺寸发生变化时，使用自适应布局的页面会调整页面的元素内容，而不改变页面布局方式。通过改变页面元素内容的位置排列和大小尺寸，让页面更贴合显示屏幕的尺寸，从而保证页面信息的完整性。

响应式本质在于整体的一个布局方式，自适应在于里边元素的排列方式。