笔记-rem布局js版

2017-08-01  本文已影响0人  kunlu

rem 布局非常简单,首页你只需在页面引入这段原生 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>=640){

         docEl.style.fontSize = '100px';

      }else{

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

      }

  };

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

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

})(document, window);

然后再css的单位都改成rem,这里代码的1rem =100px,如要修改只需修改第八行的fontsize即可。

上一篇 下一篇

猜你喜欢

热点阅读