笔记-rem布局js版

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即可。

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

推荐阅读更多精彩内容