Vue3中如何使用rem来控制字体大小问题

  <script>
    let tid = null;
    function resizeWindow() {
      const docEl = document.documentElement;
      //当前页面的长度
      const HtmlDom = docEl.getBoundingClientRect().width;
      //设置rem
      docEl.style.fontSize = HtmlDom / 192 + "px";
    }
    window.addEventListener("resize", () => {
      this.clearTimeout(tid);
      tid = this.setTimeout(resizeWindow, 300);
    });
    resizeWindow();
  </script>

    //假设我给根元素的大小设置为16px
    html{
         font-size：16px
    }
    //那么我底下的p标签如果想要也是16像素
    p{
         font-size:1rem
    }
    //如此即可

// rem等比适配配置文件
// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {
  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 1920;
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变浏览器窗口大小时重新设置 rem
window.onresize = function() {
  setRem();
};

import './libs/rem.js'

<div id="div1">我是一个div标签</div>

#div1{    
 // width:100%;
  font-size: 1rem;  
  width: 16rem;   
  height: 2rem; 
  background-color: lawngreen;
}