(function(doc, win) {
    setRem();
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            setRem();
        };
    if (!doc.addEventListener)
        return;
    win.addEventListener(resizeEvt, recalc, false);
    // doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

function setRem() {
    var docEl = document.documentElement;
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) {
        return;
    }
    docEl.style.fontSize =(clientWidth/750>1?20:20 * (clientWidth/750)) + 'px';
}
 

orientationchange 事件是在使用者水平或者垂直翻轉裝置（即方向發生變化）時觸發的事件。

注意：如果要檢視 orientationchange 事件的效果, 使用者必須使用移動裝置或者移動模擬器來檢視本站例項。

當調整瀏覽器視窗的大小時，發生 resize 事件。

resize() 方法觸發 resize 事件，或規定當發生 resize 事件時執行的函式。

有些時候，我們需要在瀏覽器視窗發生變化的時候，動態的執行一些操作，比如做自適應頁面時的適配。這個時候，我們需要在視窗拖動的時候去執行程式碼。但是有些時候，執行的操作比較複雜，我們只希望在視窗拖動完畢之後，在執行程式碼，否則極容易造成瀏覽器假死狀態，這個時候該如何解決呢。

瀏覽器視窗發生改變

先來寫一下視窗拖動時執行程式碼的函式，原生JS可用window.onresize Jquery可用$(window).resize()。

window.onresize = function(){
    console.log("視窗發生改變了喲！");
}
 
$(window).resize(function(){
    console.log("視窗發生改變了喲！");
})

這段程式碼在視窗拖動時會執行多次，如果執行的程式碼較複雜，極容易造成瀏覽器假死，對頁面效能影響較大。

解決resize執行多次

如何實現不管視窗如何改變，只在停止改變之後才執行程式碼呢？我們來對之前的程式碼做下修改：

var resizeTimer = null;
$(window).bind('resize', function (){
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function(){
                console.log("視窗發生改變了喲！");
        } , 500);
});

通過增加定時器的方式來讓程式碼延遲執行，這樣每次視窗改變的時候，我們都清除事件，只有當他停下來之後，才會繼續執行。這個方法雖然可以解決resize執行多次的問題，但是感覺還不夠完美。

wresize外掛：

(function($) {  
    $.fn.wresize = function(f) {  
        version = '1.1';  
        wresize = {  
            fired : false,  
            width : 0  
        };  
 
    function resizeOnce() {  
        if ($.browser.msie) {  
            if (!wresize.fired) {  
                wresize.fired = true;  
            }else{  
                var version = parseInt($.browser.version, 10);  
                wresize.fired = false;  
                if (version < 7) {  
                    return false;  
                } else if (version == 7) {  
                    // a vertical resize is fired once, an horizontal resize  
                    // twice  
                    var width = $(window).width();  
                    if (width != wresize.width) {  
                            wresize.width = width;  
                            return false;  
                    }  
                }  
            }  
        }  
        return true;  
    }  
 
    function handleWResize(e) {  
        if (resizeOnce()) {  
            return f.apply(this, [ e ]);  
        }  
    }  
 
    this.each(function() {  
        if (this == window) {  
            $(this).resize(handleWResize);  
        } else {  
            $(this).resize(f);  
        }  
    });  
    return this;  
    };  
})(jQuery);  

這是在網上找到一個jquery外掛原始碼，你可以把他另存為jquery.wresize.js，然後在你的頁面引用，並執行以下操作。

function sayHello() {  
    console.log("視窗發生改變了喲！");
}  
$(window).wresize(sayHello);