vue中数据大屏rem适配

1、安装 @njleonzhang/postcss-px-to-rem 包
npm i @njleonzhang/postcss-px-to-rem -D

2、新建.postcssrc.js配置文件 页面内的px就会被转换成rem（根目录下新建）
  module.exports = {
   plugins: {
     autoprefixer: {},
     "@njleonzhang/postcss-px-to-rem": {
       unitToConvert: 'px', // (String) 要转换的单位，默认是px。
       widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，一般是1920.
       unitPrecision: 3, // (Number) 允许 REM 单位增长到的十进制数字.
       selectorBlackList: ['.ignore', '.hairlines'], // (Array) 要忽略并保留为 px 的选择器.
       minPixelValue: 1, // (Number) 设置要替换的最小像素值.
       mediaQuery: false // (Boolean) 允许在媒体查询中转换 px.
     }
   }
 }
3、新建一个rem.js文件 在入口中引入 用于动态计算font-size
    function init(screenRatioByDesign = 16 / 9) {
      let docEle = document.documentElement
      function setHtmlFontSize() {
        var screenRatio = docEle.clientWidth / docEle.clientHeight;
        var fontSize = (
          screenRatio > screenRatioByDesign
            ? (screenRatioByDesign / screenRatio)
            : 1
        ) * docEle.clientWidth / 10;
        docEle.style.fontSize = fontSize.toFixed(3) + "px";
        console.log(docEle.style.fontSize);
      }
​
      setHtmlFontSize()
​
      window.addEventListener('resize', setHtmlFontSize)
    })()