需求点 : 产品给的设计图是750px宽度的 要求适配所有机型的移动端
参考 https://www.cnblogs.com/wtsx-2019/p/12656554.html
移动端vue配置 REM 适配
设计图给的 使用px作为单位，如果需要使用rem单位，推荐使用以下两个工具：
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
amfe-flexible 用于设置 rem 基准值
一、使用 amfe-flexible 动态设置 REM 基准值（html 标签的字体大小）
1、安装
# yarn add amfe-flexible
npm i amfe-flexible
2、然后在 main.js 中加载执行该模块
...
import ‘amfe-flexible‘
最后测试：在浏览器中切换不同的手机设备尺寸，观察 html 标签 font-size 的变化。
二、使用 postcss-pxtorem 将 px 转为 rem
1、安装
# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的简写
npm install postcss-pxtorem -D
2、然后在项目根目录中创建 vue.config.js 文件
3、配置完毕，重新启动服务
最后测试：在浏览器中审查元素的样式查看是否已将 px 转换为 rem。
注意：
1.只能转换单独的 .css|.less|.scss 之类的文件、.vue 文件中的 style 中的 px
2.不能转换行内样式中的 px
然后初始化样式
参考 https://www.jianshu.com/p/43f8ac0a11a2
一、样式初始化
normalize.css 是什么？
它是css样式初始化的插件。
在实际的开发中，我们经常会将浏览器默认的样式重置，比如如下办法：
* {
margin: 0;
padding: 0;
border:0;
}
通过上述办法可以重置样式，但是太过于简单粗暴，*是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此不建议使用。与此同时，normalize.css就诞生了，它与许多CSS重置不同，保留了有用的默认值，更正了常见浏览器不一致性等错误。
二、组件安装
npm install --save normalize.css
三、组件引入
import ‘normalize.css/normalize.css‘作者：无剑_君
链接：https://www.jianshu.com/p/43f8ac0a11a2
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。