• 對(duì)于除echart圖外的適配我們添加的是px轉(zhuǎn)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, // 設(shè)計(jì)稿寬度除以 10，  開(kāi)頭大寫(xiě)的Px 不轉(zhuǎn)換 => height: 100Px, 內(nèi)聯(lián)樣式不轉(zhuǎn)換，需要 / 75 轉(zhuǎn)成 rem
      rootValue(/*{ file }*/) {
        return 1920 / 10
      },
      unitPrecision: 5, // 計(jì)算結(jié)果保留 6 位小數(shù)
      // selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的選擇器并保留為px。
      propList: ['*'], // 可以從px更改為rem的屬性  感嘆號(hào)開(kāi)頭的不轉(zhuǎn)換
      replace: true, // 轉(zhuǎn)換成 rem 以后，不保留原來(lái)的 px 單位屬性
      mediaQuery: true, // 允許在媒體查詢中轉(zhuǎn)換px。
      minPixelValue: 2, // 設(shè)置要替換的最小像素值。
      // exclude: /node_modules/i // 排除 node_modules 文件(node_modules 內(nèi)文件禁止轉(zhuǎn)換)
      exclude: null
    }
  }
}

• 對(duì)于echart圖設(shè)置option的時(shí)候的像素是px單位的，在winddow resize的時(shí)候重新設(shè)置當(dāng)前窗口尺寸下的像素值

// 用法：
// 數(shù)組參數(shù)
const { remPx } = usePx2rempx<number[]>([6, 2, 1, 12, 2])

// 單個(gè)值
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 }
}