### 移动端页面自适应解决方案：rem布局篇
#### 一、概述
随着移动互联网的飞速发展，用户在不同设备上浏览网页的需求日益增长。为了满足这种需求，前端开发者们开发出了多种布局方式来实现页面的自适应。其中，`rem`布局作为一种灵活且高效的解决方案，在移动端自适应布局中占据了重要位置。本文将详细介绍两种常见的`rem`布局实现方法：网易的做法和淘宝的做法。
#### 二、基础知识回顾
**1. `rem`单位简介**
- `rem`（root em）是CSS中的一个相对单位，相对于根元素(html)的字体大小。如果根元素的字体大小设置为16px，那么1rem就等于16px。
- 在进行响应式布局时，可以通过动态调整根元素的字体大小来控制整个页面元素的大小，从而实现页面自适应。
**2. 设计稿尺寸与比例**
- 假设设计稿的尺寸为750*1340px。这个尺寸通常被用作基准尺寸来进行换算。
- 设计稿尺寸的选择需要根据目标设备的屏幕尺寸和分辨率来确定。
#### 三、网易做法详解
**1. 动态计算`font-size`**
- 通过JavaScript动态设置根元素(html)的`font-size`，使得页面能够根据屏幕宽度进行自适应调整。
- **关键代码**:
```javascript
(function(doc, win) {
var docEl = doc.documentElement,
dpr = 1, // 设备像素比
scale = 1 / dpr,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
docEl.dataset.dpr = dpr;
var metaEl = doc.createElement('meta');
metaEl.name = 'viewport';
metaEl.content = 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale;
docEl.firstElementChild.appendChild(metaEl);
var recalc = function() {
var width = docEl.clientWidth;
if (width / dpr > 750) {
width = 750 * dpr;
}
docEl.style.fontSize = 100 * (width / 750) + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
```
**2. CSS样式调整**
- 在引入上述JavaScript之后，CSS样式需要按照新的单位进行调整。例如，如果设计稿中的宽度为750px，则在CSS中可以写成7.5rem。
- **示例**:
```css
body {
width: 7.5rem;
height: 6.4rem;
}
```
**3. 换算依据**
- 为了确保页面元素的大小能够按照设计稿的比例正确显示，需要设置根元素的`font-size`值。在这个例子中，采用了将`px`转换为`rem`时乘以100的换算规则，即`px:rem = 100:1`。
#### 四、淘宝做法详解
**1. 动态计算`font-size`**
- 与网易的做法类似，淘宝的方法也是通过JavaScript动态设置根元素(html)的`font-size`。
- **关键代码**:
```javascript
(function(win, lib) {
var doc = win.document,
docEl = doc.documentElement,
metaEl = doc.querySelector('meta[name="viewport"]'),
flexibleEl = doc.querySelector('meta[name="flexible"]'),
dpr = 0,
scale = 0,
tid,
flexible = lib.flexible || (lib.flexible = {});
// ...省略部分代码
})(window, {});
```
**2. 兼容性处理**
- 淘宝的做法还包含了对不同设备和浏览器环境的兼容性处理，如判断是否为iOS设备，并相应地调整`devicePixelRatio`的取值。
#### 五、总结
通过上述两种不同的实现方法，我们可以看到`rem`布局在移动端页面自适应方面的强大能力。无论是网易的做法还是淘宝的做法，核心思想都是利用动态调整根元素`font-size`的方式来实现页面元素的自适应变化。此外，这两种方法还分别针对不同的设备特性进行了优化处理，确保了良好的用户体验。对于前端开发者而言，掌握这些技巧对于构建高质量的移动Web应用至关重要。
