响应式网站建设和自适应网站设计有什么区别？

响应式网站建设和自适应网站设计有什么区别？

自适应是为了解决在不同大小和分辨率的设备上呈现同样的网页，在网页内容和布局主体保持基本不变的前提下，让同一张个页面自动适应不同大小和分辨率的设备，根据设备屏幕宽度，自动调整网页内容大小。

响应式和自适应两种布局方式都是为了解决在不同大小和分辨率的设备上正确显示网页的问题。

不同的是两种布局方式采取了不同的解决方法而矣。

zui开始出现的一种新的布局方式其实是宽度自适应布局。

我们平时谈论的自适应布局，大部分时候指的就是宽度自适应布局。

响应式布局：网页内容和布局随着屏幕尺寸变化而变化

网络上也有网友用这么一张图来总结响应式和自适应的区别：

自适应布局：网页内容和布局完全一样

从上图可以看出采用自适应布局的话，不管设备屏幕尺寸如何变化，打开同一个页面看到的内容和布局基本上是一样的，不同的只是内容的尺寸。

这样就会引发一个问题，那就是如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚，从而极大损害用户体验。

响应式布局正是为了解决这个问题而衍生出来的一种新的布局方式。

它可以自动识别屏幕尺寸并做出相应调整的网页设计，页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。

响应式网站由来

zui开始网站都会被设计成固定宽度的页面，zui开始的PC显示器的分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800、900、1050、1200等几种。

后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。在大屏显示器上整个页面显的特别小，在小屏显示器上网页又出现滚动条导致用户体验极其的差。

为了解决在各种不同大小和分辨率的设备上如何正确显示网站的问题，前前后后也出现了好多种方案。

提供不同版本：zui开始的解决方法，是为不同的设备提供不同版本的网页。比如一个站点为PC、Mobile、Pad提供三个不同的版本。这样做固然保证了效果，但同时要维护好几个版本比较麻烦，而且网站有多个入口，会大大增加系统架构的复杂度。

自适应：后来人们就开始想能不能"一次设计，普遍适用"，即让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。这就是所谓自适应布局解决方案。

响应式： 采用自适应布局的话，如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚。

为了解决这个问题而衍生出来的一种新的布局方式，那就是响应式布局。

其实响应式和自适应两种布局方式从外观上很难分辨，但从技术角度来说他们运行的机理不同。所以zui后从技术角度再来总结一下两者的区别：

响应式布局不管使用什么设备都是在服务器把数据推送到浏览器后，脚本或CSS自行检测设备屏幕大小后执行对应的样式表内容，并且一直通过本地脚本在监听屏幕大小的变化，随时做出样式响应的变化，这是主动的。

自适应是用户请求访问时会夹带设备信息，服务器据此做出判断并调适应对应设备样式文件+HTML内容+JS，返回给浏览器以这种方式响应不同设备。