前端项目px转rem

1、安装插件postcss-pxtorem，安装在开发依赖里面即可

pnpm add -D postcss-pxtorem

2、项目根目录下创建postcss.config.js配置文件

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*'],
      unitPrecision: 3,
      selectorBlackList: ["no-"],
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

3、创建flexible.ts文件，在main.ts中引入

主要是监听页面变化，设置根节点的fontSize

;(function flexible(window, document) {
  const docEl = document.documentElement
  const dpr = window.devicePixelRatio || 1

  // 基准大小
  const baseSize = 16

  function setRemUnit() {
    const pixelRatio = 1 / window.devicePixelRatio
    // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    docEl.style.fontSize = Math.max(10, baseSize * Math.min(scale, 2)) + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    const fakeBody = document.createElement('body')
    const testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
})(window, document)

/**将内联样式中的px单位转rem
 *
 * @param {*} px
 * @returns
 */
export const px2rem = (px) => {
  const _FontBase = 16 // 基准16px为1rem
  if (/%/gi.test(px)) {
    // 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
    return px
  } else {
    return (parseFloat(px) / _FontBase).toFixed(4) + 'rem' // 保留4位小数点
  }
}