1、自适应

自适应布局是网页内容根据设备的不同而进行适应；通过检测视口分辨率，来判断当前访问的设备是PC端、平板还是手机，从而请求服务层，返回不同的页面；需要根据不同使用场景开发多套界面。

2、响应式

响应式布局是网页的布局针对屏幕大小的尺寸而进行响应；通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；只需要开发一套界面即可适用于所有尺寸及终端。

3、区别

比较直观的不同是：自适应：需要开发多套界面；响应式开发一套界面

自适应设计通过检测视口分辨率，来判断当前访问的设备是：PC端、平板、手机，从而请求服务层，返回不同的页面；响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

自适应对页面做的屏幕适配是在一定范围：比如PC端（>1024）一套适配,平板（768-1024）一套适配，手机端（<768）一套适配;响应式一套页面全部适配。（可以想象：响应式设计要考虑的内容要比自适应设计复杂的多）

4、学习渠道

不管哪种设计方式，都要学习基本的WEB布局，比如流式布局、定位布局、浮动布局、flex布局、grid布局等，另外还要学习@media媒体查询，视口等相关知识，这个可以从W3C官网查看资料。另外也可以学习前端框架，许多框架都支持响应式布局，比如bootstrap等。

当然，如果要想快速高效的学习响应式设计以及H5全栈开发，报一个班是最好的方式，因为培训班的教学大纲已经提炼了实际开发最常用的知识点，具有丰富开发经验的讲师按重要程度优先级安排授课内容，非常具有针对性，能起到事半功倍的效果。