PC端网页屏幕自适应方案（rem）

1、安装flexible和postcss-px2rem

npm i lib-flexible
npm i postcss-px2rem -D

2、在main.js 引入lib-flexible

import 'lib-flexible'

3、删除public/index.html 中的meta标记

 4、修改lib-flexible/flexible.js(node_modules)

 5、配置postcss-px2rem

vue.config.js里的css预处理中的postcss插件里

css: {
      loaderOptions: {
        postcss: {
          plugins: [
            //remUnit 通常我们是根据设计图宽度十分之一来定这个值
            //假如设计图给的宽度是750，我们通常就会把remUnit设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。
            require('postcss-px2rem')({
              remUnit: 80
            })
          ]
        }
      },
    },

postcss.config.js(新建)

module.exports = {
  plugins: [
    require('postcss-px2rem')({
      remUnit: 80
    })
   ]
}