vw+pxtorem+媒体查询实现移动端适配

首先来说一下思路：

首先项目中使用的单位都是px，手动将px转换为rem肯定不现实，这时候就用pxtorem插件将项目中使用的px转换为rem，转换为rem后，由于rem是根据font-size变化而变化的，要想实现移动端适配，就需要在屏幕大小是移动端大小时根据屏幕大小动态修改font-size从而影响rem修改px大小，这里根据屏幕大小动态修改font-size我使用的是vw，上面配置好后就实现了移动端的适配，接下来再通过媒体查询修改布局来实现响应式

引用一段对 vw、vh、vm 的描述

• vw是视口宽度的单位，视口宽度是100vw
• vh是视口高度的单位，视口高度是100vh
• vm取vw和vh较小的一个除以100作为单位

直接将根元素的 font-size 设置为 10vw，即可实现相同效果

详细步骤：

1、下载pxtorem

npm install pxtorem

2、在nuxt.config.js中引入

//webpack配置
  build: {