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

在之前写了一篇关于rem适配的文章，但是没有给出具体的封装，那么今天这里给出常用的三种方法，分享出来供大家参考学习，下面话不多说了，来随着小编一起学习学习吧

一、rem1.js

第一种方法考虑了m端屏幕旋转的问题.对兼容性做出了一定的处理,具体看代码.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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长度计算,

?

1 2 3 4 5 6 7 8

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防止字体继承,使页面字体过大.

?

1 2 3 4

export function rem() {   document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; //1rem = 100px   document.body.style.fontSize = '14px';// 在body上将字体还原大小，避免页面无样式字体超大 }