美文网首页
Js动态设置rem来实现移动端字体的自适应

Js动态设置rem来实现移动端字体的自适应

作者: ai_cuicui | 来源:发表于2018-01-24 17:24 被阅读0次

代码是现成的,可以直接cv!

fontsize : 1rem = 50px

(function(doc,win){

    var docEl =doc.documentElement,

        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

        recalc = function(){

            var clientWidth = docEl.clientWidth>750 ? 750 :docEl.clientWidth;

            if (!clientWidth) {return};

            docEl.style.fontSize = 100 * (clientWidth/750) + 'px';

        };

    recalc();

    if (!doc.addEventListener) return;

    win.addEventListener(resizeEvt, recalc, false);

    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document,window);

相关文章

网友评论

      本文标题:Js动态设置rem来实现移动端字体的自适应

      本文链接:https://www.haomeiwen.com/subject/hvyjvxtx.html