html响应式布局是什么,响应式布局和自适应布局有什么区别？

在移动站建设和优化中，我们经常会听到响应式和自适应这两个名词，这两者之间有什么区别呢？如何判断是响应式布局还是自适应布局呢？

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小，但是无论怎样，他们主体的内容和布局是没有变的。自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤。

响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。

上面所说的，大家可能未必能够理解，下面结合几个例子，再来理解上面的话，相信大家能够明白。

在这个网站上你可以直接的体验自适应、响应式、液态、静态几种布局的不同之处，我们来体验一下自适应和响应式。

自适应

响应式

我们可以看出，在相同宽度的情况下，响应式的布局和内容进行了调整，自适应则没有。我们再以多尺寸浏览插件来看一下小屏幕上网页内容的显示效果，我们仍然使用相同的尺寸来看两者的效果：

自适应

响应式

可以看出，响应式的布局和内容进行了调整。大家可以自己去体验一番，开启多尺寸浏览插件，根据宽度来看效果，这个更直观明了。