效果图：
自适应：
我感觉自适应分为两种：
一，通过媒体查询实现响应式（@media）
优点：适用于小型网页，用户交互较少的项目，代码用量较少；
缺点：在页面内容过多，用户交互过多的时候，如果通过 @media 来一个个改的话，那代码量可就很多了，而且也不方便维护。因此需要另一种方式来解决这个问题。
二，通过判断打开设备的类型，区分需要显示的方式和界面（本篇内容）
具体的可参考此篇文章，很好的解释了什么是响应式https://blog.csdn.net/lesouls/article/details/82689966
代码修改：
配置文件修改的是标注的几个
建议直接从Gitup上下载该项目，此项目是用 webpack 建的一个 vue 项目，上面的修改部分都有备注
具体内容请参考此篇文章https://blog.csdn.net/ZFL_123456/article/details/86651316