自适应设备屏幕布局

        //在不同设备大小下，只要更改html的font-size值即可        (function(win) {            var doc = win.document;            var docEl = doc.documentElement;            //以上两行代码获取页面的html,和document.querySelector('html') 结果一样            var tid;            function refreshRem() {                //当前window视口的宽度                var width = docEl.getBoundingClientRect().width;                if (width > 640) { // 最大宽度                    width = 640;                }                var rem = width / 20; // 将屏幕宽度分成20份， 每份为1rem                //为html设置font-size值                docEl.style.fontSize = rem + 'px';            }            //window 的视口改变时，触发resize事件            win.addEventListener('resize', function() {                //清除上一次html 中font-size 值 ，即rem值                clearTimeout(tid);                //设置设备切换后 html中font-size值                tid = setTimeout(refreshRem, 300);            }, false);            //pageshow每次加载页面时被触发，onload是第一次加载页面时，被触发            win.addEventListener('pageshow', function(e) {                //e.persisted=true 如果页面是从缓存中获取                if (e.persisted) {                    clearTimeout(tid);//在一次刷新rem值，                    tid = setTimeout(refreshRem, 300);                }            }, false);            //页面刚打开时，求rem值            refreshRem();        })(window);