pc端做各个屏幕适配(兼容到移动端屏幕尺寸)

做移动端h5适配的，vue-cli2.x的通过使用 lib-flexable 和 px2rem-loader 其实就是通过去把px转换成rem ; 这里有链接 点击

---

vue-cli3.+webpack
安装依赖：
npm install lib-flexible -S
npm install postcss-plugin-px2rem -D
postcss-plugin-px2rem； px2rem是postcss的一个插件

---

在 main.js 中引入flexible.js文件，（如果是需要兼容到pc端适配，需要修改其中代码）

 function refreshRem(){
    
    
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
    
    
            width = width * dpr;//修改后的，之前的是固定值540
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

---

//main.js
import 'lib-flexible';//这里最好把修改的flexible.js，单独的拿出来放在自己的文件夹中来进行引入，避免别人安装依赖重复修改文件

---

在vue.config.js中配置 postcss-plugin-px2rem

module.exports={
    
    
 css: {
    
    
    loaderOptions: {
    
    
      postcss: {
    
    
        plugins: [
            require('postcss-plugin-px2rem')({
    
    
                propList: ['*'],
                rootValue: 192,//这里是设计稿的宽度/10
            }),
        ]
      },
    },
  },
}