//css
    body {
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: #fff;
            }
            .page_loading_box{
                position: fixed;
                width: 100vw;
                height: 100vh;
                background: #fff;
                z-index: 9999999;
                left: 0;
                top: 0;
                text-align: center;
            }
            .page_loading {
                position: absolute;
                left: 0;
                top: 30vh;
                right: 0;
                margin: auto;
                width: 8vw;
                height: 8vw;
                border-top: 4px solid #C9151E;
                border-right: 4px solid transparent;
                border-radius: 50%;
                -webkit-animation: 1s spin linear infinite;
                animation: 1s spin linear infinite;
            }
            -webkit-@keyframes spin {
                        -webkit-from {
                            -webkit-transform: rotate(0deg);
                            -ms-transform: rotate(0deg);
                            transform: rotate(0deg);
                        }
                        -webkit-to {
                            -webkit-transform: rotate(360deg);
                            -ms-transform: rotate(360deg);
                            transform: rotate(360deg);
                        }
                    }
            @-webkit-keyframes spin {
                from {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                to {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
            @keyframes spin {
                from {
                    -webkit-transform: rotate(0deg);
                    transform: rotate(0deg);
                }
                to {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }

//js
            var curr_rem = 0;//用于存储全局参数
         function w_load() {
                (function(designWidth, designHeight , maxWidth) {
                    let doc = document,
                        win = window,
                        docEl = doc.documentElement,
                        remStyle = document.createElement("style"),
                        tid;
                    function refreshRem() {
                        let wind_width = docEl.getBoundingClientRect().width;
                        let wind_height = docEl.getBoundingClientRect().height;
                        let width =  wind_width;

                        if(designHeight){
                            let hd = wind_width  / (designWidth / designHeight)
                            if( hd >  wind_height ) maxWidth = (designWidth / designHeight) * wind_height
                        }

                        wind_width>=maxWidth && (width=maxWidth);
                        console.log( width )
                        //var rem = width * 10 / designWidth; 
                         curr_rem = width * 10 / designWidth;//10=设计图宽度/rem宽度
                        remStyle.innerHTML = 'html{font-size:' + curr_rem+ 'px;}';
                    }

                    if (docEl.firstElementChild) {
                        docEl.firstElementChild.appendChild(remStyle);
                    } else {
                        var wrap = doc.createElement("div");
                        wrap.appendChild(remStyle);
                        doc.write(wrap.innerHTML);
                        wrap = null;
                    }
                    //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
                    refreshRem();

                    win.addEventListener("resize", function() {
                        clearTimeout(tid); //防止执行两次
                        tid = setTimeout(refreshRem, 300);
                    }, false);

                    win.addEventListener("pageshow", function(e) {
                        if (e.persisted) { // 浏览器后退的时候重新计算
                            clearTimeout(tid);
                            tid = setTimeout(refreshRem, 300);
                        }
                    }, false);
                    win.addEventListener('orientationchange',function () {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }, true);
                })(2048, 1536,2048);
                //$('.page_loading_box').hide()
          }       
          //页面不能配置默认字体大小
      w_load();
            
     //获得rem对应px值  需要等页面计算完成后生效
     function rem2px(res) {
        return curr_rem * res ;
    }
            
            

 //html
    <!--页面加载start-->
        <div class="page_loading_box"  >
            <div class="page_loading"></div>
        </div>
    <!--页面加载end-->