响应式布局和自适应布局的区别？

各端分辨率

pc端（>1024）

平板（768-1024）

手机端（<768）

响应式布局

只需要编写一套代码，根据设备分辨率，进行页面排版布局调整。

调整思想一般是排版换行、内容精简、调整大小等方式。

常用的实现方式是，使用@media媒体查询，配合vh/vw/%/em/rem等不同单位计算方式来实现，或者使用UI框架（Bootstrap、ElementUI、Ant Design等）响应式栅格布局。

优点：只需要开发一套代码，方便维护，需求更改易于调整

缺点：对开发人员的技术要求更高，需要反复测试调整，以适配各分辨率设备

自适应布局

开发多套代码，根据设备分辨率，返回适合当前设备的页面内容。

优点：页面适配的分辨率跨度相对较小，展示的内容和设计更加灵活，可以关注到细节上的处理

缺点：需要开发几套代码，开发成本更高