vue项目中px单位转rem插件

2024-01-08 20:41:44

一、安装插件:

"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();
  }
};

文章来源:https://blog.csdn.net/weixin_43857653/article/details/135464523
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。