移动端、后台管理、大屏可视化等项目rem适配（postcss-pxtorem、amfe-flexible）。已自测

vue项目使用element-ui框架Rem适配（postcss-pxtorem、amfe-flexible）的安装使用。
移动端、后台管理、大屏可视化等类型项目皆适用，均已自测。
分步指南
1.安装：
使用的是vue-cli+webpack，通过npm来安装的

npm install amfe-flexible
npm install postcss-pxtorem@^5.1.1

2.引入lib-flexible：
在main.js中引入amfe-flexible

import "amfe-flexible"

3.配置vue.config.js：

module.exports=function(){
    devServer:{
        port:3000,
        open:true
    },
    //rem配置
    css: {
        loaderOptions: {
         postcss: {
            plugins: [
              require('postcss-pxtorem')({
                  rootValue: 192,
                  propList: ['*']
              })
            ]
         }
       }
    },
}

注意事项

1. 不能使用行内样式
   对于行内样式，阿里手淘并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。
   暂未找到可以转行内rem的插件，可根据下面地址的方式自己实现（未验证是否可行）。https://blog.csdn.net/weixin_39615741/article/details/111549455

2. 字号不使用rem
   我们都知道chrome的最小显示的字体是12px，如果字体用rem，计算出来小于12px，那么就也会以12px显示，而且我们不希望出现13px或者15px这样的奇葩尺寸，所以字体最好是用PX（大写）来表示，至于适应，我们可以写媒体查询。

.item {
border-bottom: 1PX #8d8d8d dashed;
font-size: 12PX;
line-height: 16PX;
@media screen and (min-width: 576PX) {
font-size: 14PX;
line-height: 18PX;
}
@media screen and (min-width: 768PX) {
font-size: 16PX;
line-height: 28PX;
}
@media screen and (min-width: 992PX) {
font-size: 16PX;
line-height: 32PX;
}
@media screen and (min-width: 1200PX) {
font-size: 18PX;
line-height: 64PX;
}
}

其他问题

1. 如果没效果，查看根元素是否添加上了fongt-size，为添加的话查看css预处理器，如果是sass改成node-sass；我这边使用的版本为：
   “node-sass”: “^4.9.0”,
   “sass-loader”: “^7.1.0”,
2. echarts字体适配

/**
 * echarts字体自适应
 * @param {*} font 字号大小
 */
export function echartGetFontSize(font) {
    let docEl = document.documentElement,
      clientWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 1920;
    return font * fontSize;
}