postcss-px2rem 的使用

两种方法：

1、不改变第三方组件的样式

第一步

先卸载安装的postcss-px2rem
npm uninstall postcss-px2rem

安装postcss-px2rem-exclude
npm i postcss-px2rem-exclude --save

第二步

在项目根目录下面建立postcss.config.js文件

 

module.exports = {
    plugins: {
          autoprefixer: {},
          "postcss-px2rem-exclude": {
                remUnit: 16,
                exclude: /node_modules/
          }
    }
  }

 

2、改变第三方组件样式px->rem(内联样式px改变不了)

第一步

npm install postcss-px2rem --save
npm install px2rem-loader --save

第二步：在vue.config.js里面假如下面红框代码

第三步：在main.js加上红框代码

第四步，创建detectZoom.js文件

export const detectZoom = () => {
  let ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }
  if (ratio) {
    ratio = Math.round(ratio * 100);
  }
  let zoom =  100 / Number(ratio);
  return zoom;
}