自适应与响应式

什么是自适应：葫芦娃大娃—变大变小（核心是宽度适应设备）

什么是响应式：变形金刚——变成最适合的样子，大小，布局等，方便操作、阅读（核心是根据宽度调整整体布局）

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

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

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

响应式：网页布局方式与内容随着屏幕尺寸变化而作出改变，呈现最佳的体现效果

响应式VS自适应：

对于同一个页面（图中的Html），使用响应式布局，用不同设备（电脑、平板、手机）去访问此页面，最后看到的布局和内容有很大不同。

响应式案例：屏幕宽度大于720像素，则4张图片并排在一行：

如果屏幕宽度在不大于720像素，则4张图片分成两行：

如果屏幕宽度在小于600像素话，网站主导航由平铺变成了下拉：

响应式布局：多套CSS

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

自适应:一套CSS

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