也许你在听到响应式布局和自适应布局时会觉得两者都差不多，或者说你对两者的界限划分十分混淆。本文就来了解什么是响应式布局，什么又是自适应布局吧！

以下是根据个人见解来简要说明自适应和响应式的区别：

自适应布局：多个终端（pc、平板、手机）多套代码

响应式布局：多个终端一套代码

不知道大家是否注意到了标色的加粗部分，想必从这里大家能一下将之前模糊的界限划分开了吧！

自适应和响应式应用场景：

关于自适应和响应式的应用场景，本人百度后似乎没有什么十分明显的场景应用说明。于是便根据自己个人工作经验总结出以下几点：

响应式常见应用常见：

1、后端管理平台

2、小型官网、对网站细节不是特别着重的网站

3、公司需求（这里的公司需求涉及的方面很多，就不细细赘述了）

自适应布局应用：个人认为自适应布局的多个终端多套代码常见于着重于用户体验或逻辑复杂的网站。

1、重于用户体验：简单的来说如果不同终端对于页面中的图片尺寸有着严格的规定，那么你想一套代码搞定，我只能说与其有这个时间不如直接写出多个终端的代码，这样无论效率/质量都将是最优的。

2、逻辑复杂：这里的逻辑复杂是指在页面中又很多需要判断先隐藏的功能块，你想想本来就很庞大的页面再加上响应式的代码，最终一个页面质量会有多差，用户半天进不去页面或者页面半天不能加载，这个时候你还考虑响应式吗？

说完定义和常见应用，下面我们就来说是关于响应式布局应用的一些关键点吧！

1、允许网页宽度自动调整

<meta name="viewport" content="width=device-width, initial-scale=1" />

2、尽量少使用绝对单位px，多使用百分比、rem、em等

3、图片等的自适应处理，即百分比等。

以上便是个人对于自适应和响应式的一些理解，如有不足之处欢迎指出。