效果图：

自适应：

我感觉自适应分为两种：

一 ，通过媒体查询实现响应式（@media）

优点 ：适用于小型网页，用户交互较少的项目，代码用量较少；

缺点 ：在页面内容过多，用户交互过多的时候，如果通过 @media 来一个个改的话，那代码量可就很多了，而且也不方便维护。因此需要另一种方式来解决这个问题。

二 ，通过判断打开设备的类型，区分需要显示的方式和界面（本篇内容）

具体的可参考此篇文章，很好的解释了什么是响应式

前端布局是响应式好？还是手机和PC端分开来写好？_Le cuer的博客-CSDN博客​blog.csdn.net

代码修改：

配置文件修改的是标注的几个

建议直接从Gitup上下载该项目，此项目是用 webpack 建的一个 vue 项目，上面的修改部分都有备注

点击进入Gitup地址

sunwenxu1997/adaptiveDifferentiation​github.com

具体内容也可以参考此篇文章

vue.js实现移动端和PC端切换，超详细_ZFL_123456的博客-CSDN博客_vue移动端与pc端​blog.csdn.net