<script>
    let tid = null;
    function resizeWindow() {
      const docEl = document.documentElement;
      //當(dāng)前頁面的長度
      const HtmlDom = docEl.getBoundingClientRect().width;
      //設(shè)置rem
      docEl.style.fontSize = HtmlDom / 192 + "px";
    }
    window.addEventListener("resize", () => {
      this.clearTimeout(tid);
      tid = this.setTimeout(resizeWindow, 300);
    });
    resizeWindow();
  </script>

?? ?//假設(shè)我給根元素的大小設(shè)置為16px
?? ?html{
?? ??? ? font-size：16px
?? ?}
?? ?//那么我底下的p標(biāo)簽如果想要也是16像素
?? ?p{
?? ??? ? font-size:1rem
?? ?}
?? ?//如此即可

// rem等比適配配置文件
// 基準(zhǔn)大小
const baseSize = 16;
// 設(shè)置 rem 函數(shù)
function setRem() {
? // 當(dāng)前頁面寬度相對于 1920寬的縮放比例，可根據(jù)自己需要修改。
? const scale = document.documentElement.clientWidth / 1920;
? // 設(shè)置頁面根節(jié)點字體大?。ā癕ath.min(scale, 2)” 指最高放大比例為2，可根據(jù)實際業(yè)務(wù)需求調(diào)整）
? document.documentElement.style.fontSize =
? ? baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改變?yōu)g覽器窗口大小時重新設(shè)置 rem
window.onresize = function() {
? setRem();
};

import './libs/rem.js'

<div id="div1">我是一個div標(biāo)簽</div>

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