在当今移动互联网时代，响应式网页设计是前端开发中的一项重要技能。随着不同分辨率屏幕设备的普及，传统的像素（px）固定布局已无法满足开发需求，而使用rem（root em）作为单位则能很好地解决这一问题。rem单位是相对于根元素（html元素）的字体大小来计算的，使得我们可以基于设备的屏幕尺寸来设计和开发灵活可变的页面布局。本文将围绕rem适配的三种常用封装方法展开介绍，并配合示例代码深入分析。
### 1. rem适配的必要性
在进行前端开发时，我们通常需要考虑到多种不同尺寸的屏幕，如手机、平板、PC等。为了使网页在各种设备上都能保持良好的展示效果，需要采取适应不同设备屏幕尺寸的布局策略。传统的px单位布局方案难以实现跨设备的统一效果，而使用相对单位em或rem则可以较好地解决这一问题。
### 2. rem适配的封装方法
#### 2.1 rem1.js封装方法
第一种封装方法着重于处理移动端屏幕旋转时页面布局的适应问题。代码中首先通过判断浏览器环境是否支持orientationchange事件来决定使用哪种事件类型。随后定义了一个recalc函数，该函数根据当前设备的clientWidth值来动态计算根元素的字体大小，从而实现不同屏幕尺寸下的自适应。该方法同时考虑了页面初次加载以及屏幕尺寸和旋转变化后的自适应情况。
```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();
}
```
#### 2.2 rem2.js封装方法
第二种封装方法则是基于html标签的offsetWidth属性来进行计算。通过获取html标签的实际像素宽度，按照750px设计稿上的1rem等于100px的关系，来动态调整html的font-size值。同时设置了窗口大小变化时的事件监听，确保页面能够实时响应尺寸变化。
```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();
};
}
```
#### 2.3 rem3.js封装方法
第三种封装方法与前两种略有不同，它采用了window.innerWidth来获取当前视窗的宽度。使用此宽度值除以设计稿的750宽度，再乘以100，从而得到一个与当前屏幕宽度成正比的字体大小值，并设置到html的font-size上。此外，为了防止字体大小继承导致页面字体过大的问题，还单独设置了body的font-size值。
```javascript
export function rem() {
document.documentElement.style.fontSize = window.innerWidth / 7.5 + 'px'; // 1rem = 100px
document.body.style.fontSize = '14px'; // 在body上将字体还原大小，避免页面无样式字体超大
}
```
### 3. 结语
以上三种封装方法都是前端开发者在进行响应式网页布局时常用的技巧。它们各有特点，开发者可以根据具体项目需求和设备兼容性选择合适的封装方法。在实现rem适配的过程中，关键点在于如何根据不同的屏幕尺寸动态调整根元素的font-size值，以保证布局的灵活性和页面内容的可读性。
希望本文对rem适配的三种常用封装方法的介绍能够对前端开发人员有所帮助。在实际开发过程中，建议多实践和比较各种方法的优劣，以便选取最合适自己项目的方案。如果有任何疑问或者需要进一步讨论，请随时留言交流。感谢大家的关注和支持。
