移动端响应式单位rem

只要在头部引入这个js，就可以换算出在标准屏幕下 1rem等于100px

<script>
        window.addEventListener('resize', setHtmlFontSize)
        setHtmlFontSize();

        function setHtmlFontSize() {
            // 根据屏幕的宽度来改变根元素的字体大小的值
            // 当前屏幕 / 标准的375屏幕 求得你当前屏幕是标准屏幕的多少倍 * 标准屏幕根元素的字体大小
            // 当前屏幕的宽度 / 375 * 100
            // 假如当前750/375 = 2 * 100 == 200px 
            // 1. 当前屏幕的宽度
            var windowWidth = document.documentElement.offsetWidth;
            // 限制最大屏幕 和最小屏幕
            if (windowWidth > 750) {
                windowWidth = 750;
            } else if (windowWidth < 320) {
                windowWidth = 320;
            }
            //2. 标准屏幕的宽度
            var StandardWidth = 375;
            // 标准屏幕的html的字体大小
            var StandardHtmlFontSize = 100;
            //3. 当前屏幕需要设置的根元素的字体大小
            var htmlFontSize = windowWidth / StandardWidth * StandardHtmlFontSize;
            //4. 把当前计算的html 字体大小设置到页面的html元素上就可以
            document.querySelector('html').style.fontSize = htmlFontSize + 'px';
        }
    </script>
    ~~~