H5页面字体大小使用rem (重置字体大小)setFontSize.js

/*by  min*/
//初始化rem
(function(){
    var getStyle = (function(){
        if(window.currentStyle){
            return function(obj, name){
                return obj.currentStyle[name];
            }
        }
        else{
            return function(obj, name){
                return getComputedStyle(obj, false)[name];
            }
        }
    })();

    var addEvent = (function(){
        if(document.attachEvent){
            return function(obj, ev, fn){
                obj.attachEvent('on'+ev, fn);
            };
        }
        else{
            return function(obj, ev, fn){
                obj.addEventListener(ev, fn, false);
            };
        }
    })();

    var oHtml = document.querySelector('html');
    var fontSize = getStyle(oHtml, 'fontSize').split('px')[0];
    var originalWidth = 750;

    setFontSize();

    addEvent(window, 'resize', function(){
        setFontSize();
    });

    function setFontSize() { 
        var size = size || 200;
        var _fontSize = (getSize()['width'] * fontSize / 750)>size?size:(getSize()['width'] * fontSize / 750);
        oHtml.style.fontSize = _fontSize + "px";
    }

    function getSize() {
        return {
            width :document.documentElement.clientWidth || document.body.clientWidth,
            height :document.documentElement.clientHeight || document.body.clientHeight
        }
    }
})();

  setFontSize.js

注意html字体大小要先设置成100px,并且JS在CSS重置为100px以后引入。

posted @ 2017-11-23 18:05  南夏啊南夏  阅读(4543)  评论(0编辑  收藏  举报