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

引言

之前曾过rem适配的话题，但未具体涉及封装细节。今天，我将分享三种常用的方法，供各位参考学习，希望能对狼蚁网站SEO优化有所助益。让我们跟随长沙网络推广的脚步，一起来了解吧。

一、rem1.js：灵活适配各种屏幕

第一种方法特别考虑了移动设备端的屏幕旋转问题，并对不同浏览器的兼容性做了处理。其核心代码如下：

```javascript

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长度来计算。核心代码如下：

```javascript

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值

rem();

};

};

```

三、rem3.js：细致入微的字体控制

第三种方法使用windownerWidth进行计算，同时为了防止字体继承导致的页面字体过大，特别设置了body的fontSize。核心代码如下：

```javascript

export function rem() {

document.documentElement.style.fontSize = windownerWidth / 7.5 + 'px'; // 设置1rem等于100px

document.body.style.fontSize = '14px'; // 防止页面字体过大，保持合适的阅读体验

}

```以上就是关于rem适配的三种常用方法。希望这些内容对大家的学习或工作有所帮助。如果有任何疑问，欢迎大家留言交流。感谢大家对狼蚁SEO的支持与关注。让我们一起更多有关SEO优化的知识和技巧吧！在分享同进步！