vue 项目自适应 px转rem 插件postcss-pxtorem

我用的是vue-admin 框架 --force  忽略 版本的问题

1、安装

npm i postcss-plugin-px2rem --save -dev --force

2、找到 postcss.config.js   没有的话就新建一个

module.exports = {
  'plugins': {
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {},
    'postcss-plugin-px2rem': {
      rootValue: 16, // 设计稿宽度的 1/10
      propBlackList: ['border', 'border-top', 'border-left', 'border-right', 'border-bottom'] // 不需要转换为 rem 单位的 CSS 属性
    }
  }
}

3、在src->utils->新建文件rem.js

// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

4、main.js中引入rem.js

import './utils/rem.js' // 缩放自适应

5、重启项目