vue react PC/移动端 lib-flexible postcss-px2rem 一套自适应方法

安装 lib-flexible postcss-px2rem 两个包

npm i lib-flexible --save
npm i postcss-px2rem --save

vue 在main.js 中引入，react 在index.js 中引入

import 'lib-flexible'

modul文件夹中找到 lib-flexible ->flexible.js

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

react 在config文件夹下的webpack.config.dev.js文件中加入


按照比例来UI是1920就 /10 就是192

vue中 在根目录下新建 vue.config.js

 module.exports = {
    css: {
        loaderOptions: {
          postcss: {
            // 这是rem适配的配置  注意： remUnit在这里要根据lib-flexible的规则来配制，如果您的设计稿是750px的，用75就刚刚好。
             plugins: [
              require("postcss-px2rem")({
                remUnit: 192
          })
        ]
      }
    }
 }

就可以实现PC，移动两端都适配了