码农公社 210.net.cn 210是何含义？10月24日是程序员节，1024 = 210、210既 210 之意。
根据鄙人多年临床经验，用不加防腐剂的言语给你说一说 自适应 跟 响应式 的区别。
注： 本文只说一说区别以及它们产生的背景，不讨论它们的具体使用。
一、啥是自适应布局
自适应布局就是宽度自动匹配页面布局，在不同的设备上，网页以等比例的形式缩放宽度，呈现同样的主体内容和排版布局。
自适应布局演示图：
我们可以看到，随着屏幕宽度缩放，网页内容也以等比例缩放，
不管屏幕宽度为多少，网页排版布局都是一样的，只是页面元素的大小变化了。
二、什么是响应式布局
响应式布局就是根据屏幕大小变化，页面的内容排版布局会自动调整变动，以呈现更好的用户体验 。
响应式布局演示图：
可以看到，随着屏幕宽度的缩放，页面元素尺寸变化的同时，布局和展示的内容会有所变动
自适应布局出现的背景
在PC时代初期，网页设计者都会设计固定宽度的页面，最开始的电脑显示器分辨率种类不多，因为当时电脑本来就少。后来随着显示器种类越来越多，以及笔记本、平板电脑的普及，这种固定宽度的页面出现了问题。于是出现了一种新的布局方式，宽度自适应布局。我们平时谈论的自适应布局，大多指的就是宽度自适应布局 再到后来，互联网大战从PC打到了手机，还有 HTML5 标准的发布。自适应布局也从PC延伸到手机，自适应布局也因此火了起来，成为网页设计的必要需求
响应式布局出现的背景
自适应虽然成为网页设计的必要需求，但还是暴露出一个问题，如果屏幕太小，即使网页内容能够根据屏幕大小进行适配，但是在小屏幕上查看，会感觉内容过于拥挤，降低了用户体验。此时，为了解决这个问题而衍生出来的概念就是响应式布局。它可以自动识别屏幕宽度、并做出相应调整。网页的排版布局和展示的内容会有所变动