rem适配的有几种常用封装

这篇文章给大家分享的是有关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适配的有几种常用封装”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！