H5 前端頁面適配響應式

辭職有半個月了，面試了幾家公司，還在掙扎中。。。。

不廢話，H5頁面適配成響應式，可以用百分比或者rem.

rem是相對於html根元素的單位，可以根據根元素的大小做出等比縮放，

通常，假如設置，html{font-size:100px;},那么，1rem=100px;

 

那么如何做到響應式呢？我們需要一點JS代碼：

(function(win) {
    var doc = win.document;
    var docEl = doc.documentElement;
    var tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
		//alert(width);
        if (width > 650) { // 最大寬度
           // width = 540;
		   docEl.style.fontSize=100+"px";
        }else{
			docEl.style.fontSize=40+"px";
		}
        //var rem = width / 10; // 將屏幕寬度分成10份， 1份為1rem
        //docEl.style.fontSize = rem + 'px';
    }

    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);

    refreshRem();

})(window);

　　代碼可以根據自己的需要進行修正，需要請拿走，不謝。。。