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以后引入。

转载于:https://www.cnblogs.com/ourLifes/p/7886276.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值