pc端使用lib-flexible和postcss-pxtorem实现自适应

场景：

做了一个管理系统，要实现自适应不同的分辨率。

---

1、插件使用

使用lib-flexible和postcss-pxtorem来实现
代码：

npm install lib-flexible --save
npm install postcss-pxtorem --save

---

2、删除meta标签

在index.html文件中删除meta标签（因为lib-flexible会根据屏幕生成相对的meta标签）。

---

3、修改refreshRem方法

我们可以在node_modules中找到lib-flexible文件夹下的flexible.js文件修改里面的refreshRem方法，改为：

function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = width * dpr;//重点
        }
        var rem = width /10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

注意：为了方便开发不用每个人都修改，我把lib-flexible文件夹复制出来放到了src文件夹下面，并在main.js中引入（如果直接在node_modules修改就正常引入就可以），这样的话在main.js里面引入，代码如下：

import "./utils/flexIble.js";   //复制出来放在src文件夹下
//import 'lib-flexible'    //直接在node_modules中修改

5、在vue.config.js添加如下代码

css: {
    loaderOptions: {
      postcss: {
        postcssOptions:{
          plugins: [
            // 把px单位换算成rem单位
            require("postcss-pxtorem")({
              rootValue: 192, // 换算的基数 375的设计稿，换算基数就是37.5 ,本项目是1920，则192
              propList: ["*"], //可以从px更改为rem的属性。
              // selectorBlackList: [".el"],// 要忽略的选择器并保留为px。
              minPixelValue: 2 // 设置要替换的最小像素值。
            })
          ]
        }
      },
    }
  },

注意：如果是随时响应改变分辨率的话
在App.vue内添加如下代码：

created() {
    this.resizeFun();
  },
  methods: {
    resizeFun() {
      let docEle = document.documentElement,
        resizeEvt =
          "orientationchange" in window ? "orientationchange" : "resize",
        resizeFun = () => {
          let clientWidth = docEle.clientWidth;
          if (!clientWidth) return;
          // 100是换算系数，相当于1rem=100px
          //1920是作为设计图的基准，我这是按照1920*1080的分辨率，可自行修改
          docEle.style.fontSize = 192 * (clientWidth / 1920) + "px";
        };
      if (!document.addEventListener) return;
      window.addEventListener(resizeEvt, resizeFun, false);
      window.addEventListener("DOMContentLoaded", resizeFun, false);
      resizeFun();
    },
  },```
注：忽略单个属性的最简单方法是在像素单位声明中使用大写字母，将px写为Px。