自适应设备屏幕布局

        //在不同设备大小下，只要更改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);