大屏适配

1 ，安装 amfe-flexible

 

npm install amfe-flexible  --save-dev

 

 

2, 安装  postcss-pxtorem
npm i postcss-pxtorem@5.1.1 --save-dev

 

 

3， vue.config.js中添加配置

 css: {

    loaderOptions: {

      postcss: {

        plugins: [

          require('postcss-pxtorem')({

            rootValue: 192, // PC端（1920的UI图）——换算基数（分辨率÷10）

            propList: ['*'],

            unitPrecision: 3, // 保留rem小数点多少位

            exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值

            // selectorBlackList: ['.el-'], // 要忽略并保留为px的选择器

            replace: false, // （布尔值）替换包含REM的规则，而不是添加回退。

            mediaQuery: false, // 媒体查询( @media screen 之类的)中不生效

            minPixelValue: 5 // px小于5的不会被转换

          })

        ]

      }

    }

  },

 

4，main.js中引入

import 'amfe-flexible';