响应式

1. 只需开发一套界面。
2. 对页面做的屏幕适配是在一定范围：比如pc端（>1024）一套适配,平板（768-1024）一套适配，手机端（< 768）一套适配;响应式一套页面全部适配。（可以想象：响应式设计要考虑的内容要比自适应设计复杂的多）
3. 建立一个网页，通过CSS Media Query，Content - Based Breakpoint等技术来改变网页的大小适应不同分辨率的屏幕。

自适应

1. 需要开发多套界面
2. 通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
3. 为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。

区分响应式和自适应

1. 在电脑端使用浏览器chrome或edge打开网址。
2. 按 F12 或 右键鼠标 选择 检测。
3. 点击面板左上角里的设备切换图标，如下图

4. 切换后，
   电脑端和手机端显示的布局自动切换，就是响应式，例如本站；
   如果布局没有自动适配，刷新页面后布局才切换适配（网址跳转或没有跳转），就是自适应，例如百度；
   如果刷新也没有切换，既不是响应式也不是自适应，也就没有适配不同设备。

建议

• 开发角度：单页面，功能复杂，采用自适应；功能简单，采用响应式。
• SEO角度：搜索引擎普遍偏爱响应式。

总结

• 响应式：一套模板；由前端适应，不同分辨率模板合并在一个页面，下载一页模板就一个页面。
• 自适应：多套模板；由后端适应，每一个分辨率模板一个页面，分别下载不同分辨率模板。