rem

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容