1. 安装lib-flexible
npm i lib-flexible --save
2. 在项目入口文件main.js里引入lib-flexible
import 'lib-flexible/flexible.js'
3.在项目根目录的index.html 头部删除自动生成的meta标签, lib-flexible会根据屏幕自动生成相对于的meta标签
// 删除
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4. 安装插件cssrem
1).vscode安装
配置vscode，文件 -> 首选项 -> 设置，在用户设置里添加如下配置
// 基础的font-size, 如果设计图是750标准的，设置成75
“cssrem.rootFontSize”: 75,
// px转rem小数点最大长度
“cssrem.fixedDigits”: 2,
// 自动移除0开头的前缀，默认：true
“cssrem.autoRemovePrefixZero”: true
2).webStorm插件安装
英文版：file–>settings–>plugins
中文版：文件–>设置–>插件
在plugins上搜索px出现px2rem，点击Install，下载完了点击Restart IDE重启
5.重启之后还是进入在setting里，可以找到刚装好的插件
通过root fontsize设置页面的根字体大小，页面中的所有 rem 单位，将使用这个字体大小作为参考值，
输入px的时候，会提示px to rem，选中即可一键转化啦
【注意】：这个插件还有两个常用的快捷键，一个是alt + d，一个是ctrl + alt + d。
alt + d是替换一行 ctrl + alt + d 是替换整个文件
只能替换css文件，在html里面的内联样式替换不了