利于js 来控制 根节点

// 设置根节点 font-size   可以直接按设计稿来写  这种方案是最好的
(function (doc, win, designWidth) {
    const html = doc.documentElement; //dpr
    const refreshRem = () => {
        const clideWidth = html.clientWidth; //css 宽
        console.log(clideWidth)
        if (clideWidth >= designWidth) {
            console.log('----')
            //超过设计稿就 直接等于  100px
            html.style.fontSize = '100px'
        } else {
            console.log('----')
            //考虑了基准点
            // html.style.fontSize = 16 * clideWidth / 375 + 'px';
            // 他是帮你先帮你处理了 处以drp  不用你在处理这个问题   !!!记得要除以100就可以了
            //假如图片是 750  就 ==>  750 / 100 = 7.5rem;
            //另外一种 可以直接按设计稿来写
            html.style.fontSize = 100 * (clideWidth / designWidth) + 'px';      // 假如4div  就 750 / 4 = 187.5 / 100 = 1.875rem
        }
    }
    //DOMContentLoaded == window.onload      
    //dom 加载完成
    doc.addEventListener('DOMContentLoaded', refreshRem)
})(document, window, 750)
// 第三个参数 是你设置的基准 750 == ip6

 body {
            margin: 0
        }

        div {
            background-color: aquamarine;
            float: left;
         
            /*  设计稿 750 / 4 = 187.5 / 100 = 1.875rem */
            width:1.875rem; 
            /* 公式
                    假如4个div
                    750 / 4 = 187.5 / 100 =  1.875
                 */
            height: 1.875rem;
           
        }

        

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>