LiangZhuTongHua/src/useFunctions/useSizeAdapt.js

// 用法：
// width: calc(950 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

import { onBeforeUnmount, ref } from 'vue'

export default function useSizeAdapt(windowWidthWhenDesign = 375, windowHeightWhenDesign = 724) {
  const windowSizeInCssForRef = ref('')
  const windowSizeWhenDesignForRef = ref('')

  function compute() {
    if (window.innerWidth / window.innerHeight > windowWidthWhenDesign / windowHeightWhenDesign) {
      windowSizeWhenDesignForRef.value = windowHeightWhenDesign
      windowSizeInCssForRef.value = window.innerHeight + 'px'
    } else {
      windowSizeWhenDesignForRef.value = windowWidthWhenDesign
      windowSizeInCssForRef.value = '100vw'
    }
  }

  compute()
  window.addEventListener('resize', compute)
  onBeforeUnmount(() => {
    window.removeEventListener('resize', compute)
  })

  return {
    windowSizeInCssForRef,
    windowSizeWhenDesignForRef,
  }
}