rem.js(第一版)

1!(function(win, doc) {
2    function setFontSize() {
3        // 获取window 宽度
4        var winWidth = window.innerWidth;
5        //这里是假设在750px宽度设计稿的情况下
6        //可以根据实际需要修改,假设项目是750设计图下的实际尺寸除以40倍那么这里就是40,一般情况下是100
7        doc.documentElement.style.fontSize = (winWidth / 750) * 40 + 'px';
8        // 下面这行代码是为了有时候和自己项目的某些css代码冲突,需要用!important最高层级,上面的代码就失效了,用下面这行
9        // doc.documentElement.setAttribute('style', 'font-size: '+(winWidth / 750) * 40 + 'px!important');
10    }
11    // onorientationchange 屏幕旋转事件
12    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
13    var timer = null;
14    win.addEventListener(evt, function() {
15        clearTimeout(timer);
16
17        timer = setTimeout(setFontSize, 300);
18    }, false);
19    win.addEventListener("pageshow", function(e) {
20        if (e.persisted) {
21            clearTimeout(timer);
22
23            timer = setTimeout(setFontSize, 300);
24        }
25    }, false);
26    //初始化
27    setFontSize();
28}(window, document));
29