rem

作者: He_084f | 来源:发表于2018-03-21 19:48 被阅读0次

    function Rem() {

    var docEl = document.documentElement,

    oSize = docEl.clientWidth / 7.5;

    //如果750设计稿oSize 100、  如果640设计稿 oSize 85

    if (oSize > 100) {

    oSize = 100;

    }

    docEl.style.fontSize = oSize + 'px';

    }

    window.addEventListener('resize', Rem, false);

    Rem();

    赵星(Zara.zhao)  16:42:08

    我也看到过一段计算根节点大小的js,网易的网站上是这么做的。 

        (function (doc, win) {

            var docEl = doc.documentElement,

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

                    recalc = function () {

                        var clientWidth = docEl.clientWidth;

                        if (!clientWidth) return;

                        if(clientWidth>=750){

                            docEl.style.fontSize = '100px';

                        }else{

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

                        }

                    };

            if (!doc.addEventListener) return;

            win.addEventListener(resizeEvt, recalc, false);

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

        })(document, window);

    最后用的

           

            (function (doc, win) {   

                var docEl = doc.documentElement,   

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

                recalc = function () {   

                var clientWidth = docEl.clientWidth;   

                if (!clientWidth) return;   

                docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';   

            };   

            if (!doc.addEventListener) return;   

            win.addEventListener(resizeEvt, recalc, false);   

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

            })(document, window);   

    我用过的

    var docEl = doc.documentElement,

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

        recalc =function() {

    var clientWidth = docEl.clientWidth;

          if (!clientWidth)return;

          if (clientWidth >=750) clientWidth =750;

          if (clientWidth <=320) clientWidth =320;

          docEl.style.fontSize =625 * (clientWidth /750) +'%';

        };

      if (!doc.addEventListener)return;

      win.addEventListener(resizeEvt, recalc, false);

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

    })(document, window);

    文章:http://caibaojian.com/simple-flexible.html

    相关文章

      网友评论

          本文标题:rem

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