postcss-pxtorem 使用步骤

1.下载postcss-pxtorem插件

安装指定版本
npm i [email protected]

2.在根目录添加 .postcssrc.js文件

module.exports = {
    plugins: {
      autoprefixer: {},
      "postcss-pxtorem": {
        rootValue: 37.5, //换算基数，
        propList: ['*'],
        unitToConvert: "px", // (String) 要转换的单位，默认是px。
        widthOfDesignLayout: 1920, // (Number) 设计布局的宽度。对于pc仪表盘，一般是1920.
        unitPrecision: 3, // (Number) 允许 REM 单位增长到的十进制数字.
        selectorBlackList: [".ignore", ".hairlines"], // (Array) 要忽略并保留为 px 的选择器.
        minPixelValue: 1, // (Number) 设置要替换的最小像素值.
        mediaQuery: false, // (Boolean) 允许在媒体查询中转换 px.
      },
    },
  };
  

3.在utils里添加rem.js文件

// 基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  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

import '@/utils/rem.js'

注意项:

1. 标签中直接定义的 width和height进行不了转换, 例如img标签.
2. 标签中style属性的width和height是可以被转换的.