关于PC和移动端使用rem

rem这个单位是根据页面根元素的字体大小来计算的  也就是根据html的字体大小 所以在不同的分辨率下只要改变html的 font-size就可以了

PC端 可以通过JS来动态设置根字体大小

<script>
        window.onload = function() {
            function setFontSize() {
    //因为有的document.documentElement.clientWidth拿不到页面宽度所以要做兼容
                let screenSize =
                    document.documentElement.clientWidth ||
                    document.getElementsByTagName("body").clientWidth;
                if (screenSize <= 1200) {
                    screenSize = 1200;
                }
                let htmlEl = document.getElementsByTagName("html")[0];
                //除以120是根据1920的设计稿 设置页面字体大小是16px 可根据需要进行调整
                htmlEl.style.fontSize = screenSize / 120 + "px";
            }
            setFontSize();
            window.onresize = setFontSize;
        };
    </script>

移动度设置根字体大小

    <script>
        window.onload = function() {
            function setFontSize() {
                let screenSize =
                    document.documentElement.clientWidth ||
                    document.getElementsByTagName("body").clientWidth;
                if (screenSize >= 750) {
                    screenSize = 750;
                }
                let htmlEl = document.getElementsByTagName("html")[0];
            //   跟字体大小是50px 设计稿是750 
                htmlEl.style.fontSize = screenSize / 7.5 + "px";
            }
            setFontSize();
            window.onresize = setFontSize;
        };
    </script>