移動端還原設計圖

(function (doc, win) {
            var html = doc.getElementsByTagName("html")[0],
                // orientationchange->手機屏幕轉屏事件
                // resize->頁面大小改變事件(兼容pc,移動端)
                reEvt = "orientationchange" in win ? "orientationchange" : "resize",
                designWidth=1920,
                setFontSize = function () {
                    var clientW = doc.documentElement.clientWidth || doc.body.clientWidth;
                    if (!clientW) {
                        return;
                    }
                    html.style.fontSize = 100 * (clientW / 1920) + "px";
                }
            var resetFontSize=function(){
                if(win.resetFontTimeout){
                    clearTimeout(win.resetFontTimeout);
                }
                //防抖
                win.resetFontTimeout=setTimeout(function(){
                    setFontSize();
                },500);
            }
            win.addEventListener(reEvt, resetFontSize);
            // DOMContentLoaded->dom加載完就執行,onload要dom/css/js都加載完才執行
            doc.addEventListener("onload", setFontSize);
        })(document, window);css

相關文章
相關標籤/搜索