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

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

极速赛车APP这篇文章主要给大家介绍了关于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();
};

二、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();
  };
};

三、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://www.shtuke.com/web/xindejiqiao/208987.html

如果认为本文对您有所帮助请赞助本站

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

  • 支付宝扫一扫赞助
  • 微信扫一扫赞助
  • 支付宝先领红包再赞助
    声明:凡注明"本站原创"的所有文字图片等资料,版权均属编程客栈所有,欢迎转载,但务请注明出处。
    跨域图片资源权限(CORS enabled image)浅谈移动端适配大法
    Top 极速赛车手机官网 极速赛车APP下载 极速赛车手机官网 极速赛车APP 极速赛车APP 极速赛车APP下载 极速赛车APP 极速赛车APP下载 极速赛车手机官网 极速赛车APP