大屏幕rem 自适应 postcss-pxtorem

1、安装 postcss-pxtorem

npm install postcss-pxtorem@5.1.1 -D

2、在utils 文件加下新建rem.js

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

3、引入rem.js
全局应用在main.js 里引入，部分页面应用在页面里引入

import '@/utils/handler/rem'

4、在根目录新建postcss.config.js，配置 postcss-pxtorem

module.exports = {
  plugins: {
    autoprefixer: {},
    // flexible配置
    'postcss-pxtorem': {
      rootValue: 16, // 
      propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
    }
  }
}

5、配置部分页面使用rem

module.exports = {
  plugins: {
    autoprefixer: {},
    // flexible配置
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*'], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
      exclude: (e) => {
        if (/src(\\|\/)pages(\\|\/)systemMonitor(\\|\/)dcuMonitor/.test(e)) {
          return false
        }
        return true
      }
    }
  }
}

6、postcss-pxtorem官网
https://www.npmjs.com/package/postcss-pxtorem