关于PC和移动端使用rem_pc rem.js-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_49675710/article/details/121240949

本文介绍了如何通过JavaScript动态设置HTML根元素的字体大小，从而实现基于REM单位的页面响应式布局。在PC端，当窗口宽度小于等于1200px时，字体大小设置为16px；在移动端，当窗口宽度大于等于750px时，字体大小设置为50px。这种方法确保了不同分辨率下的页面视觉效果一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>