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>
