移动端适配方案：REM与VW技术解析与实践

1. 移动端适配的必要性与挑战

作为一名经历过移动互联网爆发期的前端开发者，我深刻体会到移动端适配从"可有可无"到"生死攸关"的转变过程。2016年我们团队上线的第一个H5项目，就因为只考虑了iPhone 6的375px宽度，导致其他设备用户投诉不断——华为手机显示不全文字，iPad上按钮小得难以点击，折叠屏设备更是直接布局错乱。

1.1 设备碎片化现状

当前主流移动设备的屏幕宽度呈现出惊人的多样性：

• 小屏设备（如早期安卓机）：320px-360px
• 中屏标准（iPhone 6/7/8）：375px
• 大屏手机（主流安卓旗舰）：414px-480px
• 折叠屏设备（如三星Galaxy Z系列）：展开态可达768px
• 平板设备：768px-1024px

这种碎片化带来的核心矛盾是：设计师通常只提供一套基于375px的设计稿，而开发者需要让这套设计在各类设备上都保持视觉一致性和操作可用性。

1.2 传统方案的失效

早期我们尝试过两种简单方案，但都遇到了严重问题：

固定像素（px）方案：

css复制.button {
  width: 200px;
  font-size: 16px;
}

在375px设备上表现完美，但在320px设备上按钮会超出屏幕，在414px设备上又显得过小。这种方案完全无法适应不同屏幕尺寸。

百分比宽度方案：

css复制.container {
  width: 100%;
}
.box {
  width: 50%;
}

虽然解决了宽度适配问题，但字体大小、边距等属性仍然需要使用px单位，导致整体比例失调。更致命的是，百分比是基于父元素而非屏幕尺寸，嵌套多层后计算会变得极其复杂。

2. 现代适配方案原理深度解析

2.1 REM方案：动态基准单位

2.1.1 核心实现机制

REM（Root EM）单位的精妙之处在于它始终相对于根元素（html）的字体大小。通过JavaScript动态计算并设置根字体大小，就能实现所有使用rem单位的元素等比缩放。

典型实现代码如下：

javascript复制// 设置基准字体大小（设计稿宽度375px时，1rem=10px）
function setRem() {
  const