• 对于除echart图外的适配我们添加的是px转rem方式
  比如使用插件 postcss-pxtorem 查看 postcss-pxtorem
  postcss.config.cjs文件配置

module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: [
        'Android 4.0',
        'iOS 10.0',
        'Chrome > 31',
        'ff > 31',
        // 'ie >= 8',
        '> 1%'
      ],
      grid: true
    },
    // 'postcss-flexbugs-fixes': {},
    // 'postcss-inset': {}
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      // rootValue: 37.5, // 设计稿宽度除以 10，  开头大写的Px 不转换 => height: 100Px, 内联样式不转换，需要 / 75 转成 rem
      rootValue(/*{ file }*/) {
        return 1920 / 10
      },
      unitPrecision: 5, // 计算结果保留 6 位小数
      // selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的选择器并保留为px。
      propList: ['*'], // 可以从px更改为rem的属性  感叹号开头的不转换
      replace: true, // 转换成 rem 以后，不保留原来的 px 单位属性
      mediaQuery: true, // 允许在媒体查询中转换px。
      minPixelValue: 2, // 设置要替换的最小像素值。
      // exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)
      exclude: null
    }
  }
}

• 对于echart图设置option的时候的像素是px单位的，在winddow resize的时候重新设置当前窗口尺寸下的像素值

// 用法：
// 数组参数
const { remPx } = usePx2rempx<number[]>([6, 2, 1, 12, 2])

// 单个值
const { remPx } = usePx2rempx(14)

usePx2rempx

// vue3 ts
import { cloneDeep, debounce, isArray, isNumber, isPlainObject } from 'lodash-es'
import { onMounted, onUnmounted, ref, type Ref } from 'vue'

export const base = 1920

export const rootValue = base / 10

export function rem2px(rem: number, root?: number) {
  if (!rem) return rem
  if (root) {
    return rem * root
  }
  return rem * rootValue
}

export function px2remPx(px: number) {
  const clientWidth =
    window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  if (!clientWidth) return 0
  const fontSize = clientWidth / base
  return px * fontSize
}

export default function px2rem(px?: number, root?: number) {
  if (!px) return px
  if (root) {
    return `${px / root}rem`
  }
  return `${px / rootValue}rem`
}

export default function usePx2rempx<T>(px: number | number[] | any): { remPx: Ref<T> } {
  const remPx = ref()

  function changeValue() {
    if (isArray(px)) {
      remPx.value = px.map((value) => px2remPx(value))
    } else if (isPlainObject(px)) {
      const newRemPx = cloneDeep(px)
      Object.keys(px).forEach((key) => {
        newRemPx[key] = px2remPx(px[key] as number)
      })
      remPx.value = newRemPx
    } else if (isNumber(px)) {
      remPx.value = px2remPx(px)
    }
  }

  changeValue()

  const outerWidth = ref(window.outerWidth)

  const outerHeight = ref(window.outerHeight)

  const eventHandler = debounce(() => {
    changeValue()

    setTimeout(() => {
      outerWidth.value = window.outerWidth

      outerHeight.value = window.outerHeight
    }, 250)
  }, 150)

  onMounted(() => {
    window.addEventListener('resize', eventHandler)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', eventHandler)
  })

  return { remPx }
}