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

　　代碼能夠根據本身的須要進行修正，須要請拿走，不謝。。。