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

　　代码能够根据本身的须要进行修正，须要请拿走，不谢。。。