JS实现自适应尺寸

function useRem (baseSize = 16, el = document.documentElement) {

  function setRem () {
    // 默认使用16px作为基准大小
    const baseVal = baseSize / 1920
    const currentWindowWidth = window.innerWidth // 当前窗口的宽度
    const rem = currentWindowWidth * baseVal // 以默认比例值乘以当前窗口宽度，得到该宽度下的相应font size值
    window.$size = rem / 100
    el.style.fontSize = rem + 'px'
  }

  setRem()

  // 监听窗口大小变化
  window.onresize = () => {
    setRem()
  }
}

export default useRem

使用

<script setup>
import { onMounted } from "vue";
import useRem from "@/utils/setRem";

onMounted(async () => {
  useRem(16)
})
</script>