vue项目中px单位转rem插件

一、安装插件:

"postcss-px2rem": "^0.3.0",
"postcss-px2rem-exclude": "0.0.6",

二、新建postcss.config.js

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
            "remUnit": 192,  //尺寸1920
            "exclude": /test/i  //不转rem的文件
        }
    }
}

三、新建px2rem.js 在 main.js 引入

// rem等比适配配置文件
const baseSize = 16;

function setRem() {
  const scale = document.documentElement.clientWidth / 1920;
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}

setRem();

window.onresize = function () {
  const w = document.documentElement.clientWidth || document.body.clientWidth
  if(w>1300){
    setRem();
  }
};

你可能感兴趣的:(vue.js,javascript,前端)