关于rem适配的3种经常使用封装

发布时间: 2019-03-16 00:48:39 来源: 互联网 栏目: 心得技能 点击:

这篇文章重要给大年夜家简介了关于rem适配的3种经常使用封装,文中经过过程示例代码简介的异常详细,对各位前端开辟者们具有必定的参考进修价值,须要的同伙们下面随着小编来一路进修进修吧

媒介

在之前写了一篇关于rem适配的文章,然则没有给出详细的封装,那么明天这里给出经常使用的三种办法,分享出来供大年夜家参考进修,下面话不多说了,来随着小编一路进修进修吧

一、rem1.js

第一种办法推敲了m端屏幕改变的成绩.对兼容性做出了必定的处理,详细看代码.

export function rem (doc, win) {
  let docEl = doc.documentElement;
  //推敲和兼容了 屏幕改变的事宜
  let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  let 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);     // 页面初次翻开自适应
    recalc();
};

2、rem2.js

采取html标签的offsetWidth长度计算,

export function rem() {
  var fz = document.querySelector('html').offsetWidth / 7.5; //设计图 750 1rem=100px
  document.querySelector('html').style.fontSize =
    fz <= 100 ? fz + 'px' : '100px';
  window.onresize = function() {
    rem();
  };
};

3、rem3.js

采取window.innerWidth计算,设置了body fontSize防止字体持续,使页面字体过大年夜.

export function rem() {
  document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px
  document.body.style.fontSize = '14px';// 在body大将字体复原大年夜小,防止页面无款式字体超大年夜
}

总结

以上就是这篇文章的全部内容了,欲望本文的内容对大年夜家的进修或许任务具有必定的参考进修价值,假设有疑问大年夜家可以留言交换,感谢大年夜家对我们的支撑。

本文标题: 关于rem适配的3种经常使用封装
本文地址: http://yourctp.com/web/xindejiqiao/208987.html

假设认为本文对您有所赞助请赞助本站

付出宝扫一扫赞助微信扫一扫赞助

  • 付出宝扫一扫赞助
  • 微信扫一扫赞助
  • 付出宝先领红包再赞助
    声明:凡注明"本站原创"的一切文字图片等材料,版权均属编程客栈一切,迎接转载,但务请注明出处。
    跨域图片资本权限(CORS enabled image)浅谈移动端适配大年夜法
    Top