前言

在移动端开发中，屏幕适配一直是前端工程师需要解决的核心问题之一。随着前端技术的不断发展，适配方案也从最初的媒体查询、百分比布局，逐步演进到 rem 和 vw/vh 方案。本文将基于实际项目经验，详细分享我们在 new-app 项目中移动端适配方案的演进过程，对比 rem 和 vw 两种方案的优劣，并提供完整的迁移实践指南。

一、项目背景与适配需求

new-app 是一个面向移动端的 Web 应用，需要适配从 320px 到 750px 的各种移动设备屏幕。我们的设计稿基于 750px 宽度，需要实现以下目标：

1. 元素尺寸能够根据屏幕宽度等比缩放
2. 保持设计稿的布局比例和视觉效果
3. 方案简单易维护，性能良好
4. 兼容主流移动端浏览器

二、rem 适配方案详解

1. 实现原理

rem（root em）是相对于根元素字体大小的单位。rem 适配方案的核心思想是通过 JavaScript 动态计算根元素的 font-size，使得页面中的所有 rem 单位能够根据屏幕尺寸等比缩放。

javascript

复制

下载

php
 代码解读
复制代码
// remConfig.js 核心实现
export default {
    scale: 0,
    install: function (win, doc) {
      const baseWidth = 750  // 设计稿基准宽度
      const documentHTML = doc.documentElement
      const self = this
      
      function setRootFont() {
        const docWidth = documentHTML.getBoundingClientRect().width
        self.scale = docWidth / baseWidth
        // 最大缩放比例限制
        if (docWidth > baseWidth) {
          self.scale = 0.5
        }
        documentHTML.style.setProperty('font-size', self.scale * 100 + 'px', 'important')
      }
      
      setRootFont() 
      win.addEventListener('resize', setRootFont, false)
    }
}

2. 方案特点

1. 基准设计：以 750px 设计稿为基准，将屏幕宽度分为 100 份（1rem = 屏幕宽度/100）
2. 动态计算：通过 getBoundingClientRect() 获取精确的视口宽度
3. 缩放限制：大屏幕下固定缩放比例，避免元素过大
4. 响应式处理：监听 resize 事件，确保设备旋转时也能正确适配

3. 使用示例

在 Vue 项目中的使用方式：

javascript

复制

下载

javascript
 代码解读
复制代码
// main.js
import remAdapter from "./config/remConfig"
remAdapter.install(window, document);

// 组件中使用
<style>
.container {
  width: 7.5rem; /* 对应设计稿750px */
  height: 3.2rem; /* 对应设计稿320px */
}
style>

4. 优缺点分析

优点：

• 兼容性好，支持到 IE9+
• 计算逻辑简单直观
• 社区方案成熟（如 lib-flexible）

缺点：

• 依赖 JavaScript 动态计算
• 存在字体大小重置问题
• 缩放时可能出现亚像素渲染问题
• 需要额外处理 1px 边框问题

三、向 vw 适配方案的演进

随着 CSS3 的普及和浏览器支持度的提升，我们决定将项目迁移到更现代的 vw 方案。vw（viewport width）是相对于视口宽度的单位，1vw 等于视口宽度的 1%。

1. 迁移准备工作

首先在项目中添加必要依赖：

json

复制

下载

css
 代码解读
复制代码
{
  "devDependencies": {
    "postcss-px-to-viewport": "^1.1.1",
    "fs-extra": "^10.1.0"
  }
}

配置 PostCSS 插件：

javascript

复制

下载

java
 代码解读
复制代码
// .postcssrc.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 750,       // 设计稿宽度
      viewportHeight: 1334,     // 设计稿高度
      unitPrecision: 2,         // 转换精度
      viewportUnit: 'vw',       // 转换单位
      selectorBlackList: [      // 忽略转换的选择器
        '.ignore',
        '.hairlines'
      ],
      minPixelValue: 1,        // 最小转换像素值
      mediaQuery: false        // 是否转换媒体查询中的px
    }
  }
}

2. 自动化迁移方案

为了高效地将现有 rem 单位转换为 vw，我们开发了两个自动化脚本：

脚本1：rem → px

javascript

复制

下载

javascript
 代码解读
复制代码
// scripts/convert-rem-to-px.js
const fs = require('fs-extra');
const path = require('path');
const glob = require('glob');

function convertRemToPx(content) {
  // 处理普通rem单位
  content = content.replace(/(\d*.?\d+)rem/g, (match, num) => {
    return `${parseFloat(parseFloat(num).toFixed(0))}px`;
  });
  
  // 处理负值和带小数点的rem
  content = content.replace(/(-?\d*.?\d+)rem/g, (match, num) => {
    const pxValue = parseFloat((parseFloat(num) * 100).toFixed(0);
    return `${pxValue}px`;
  });
  
  return content;
}

// ...文件处理逻辑

脚本2：px → vw

javascript

复制

下载

javascript
 代码解读
复制代码
// scripts/convert-px-to-vw.js
const fs = require('fs-extra');
const path = require('path');
const glob = require('glob');

function convertPxToVw(content) {
  return content.replace(/(\d*.?\d+)px/g, (match, num) => {
    // 跳过0px的特殊情况
    if (match.includes('border: 0px') || match.includes('border:0px')) {
      return match;
    }
    
    // 750设计稿下：1px = 0.13333vw
    const vwValue = parseFloat((parseFloat(num) / 7.5).toFixed(2));
    return `${vwValue}vw`;
  });
}

// ...文件处理逻辑

3. 迁移执行步骤

bash

复制

下载

bash
 代码解读
复制代码
# 安装依赖
npm install postcss-px-to-viewport fs-extra glob --save-dev

# 执行转换
node scripts/convert-rem-to-px.js
node scripts/convert-px-to-vw.js

# 清理rem适配相关代码
# 1. 移除remConfig.js
# 2. 删除main.js中的rem初始化代码

4. 迁移后代码示例

css

复制

下载

css
 代码解读
复制代码
/* 迁移前 */
.header {
  height: 0.88rem;
  padding: 0 0.3rem;
}

/* 迁移后 */
.header {
  height: 11.73vw;  /* 88/7.5 */
  padding: 0 4vw;   /* 30/7.5 */
}

四、方案对比与选型建议

1. 技术指标对比

2. 选型建议

1. 选择 rem 方案：

   • 需要支持老旧浏览器（如IE9）
   • 项目已有成熟的rem方案且运行良好
   • 设计师提供的设计稿尺寸不固定

2. 选择 vw 方案：

   • 面向现代浏览器项目
   • 追求更好的性能和开发体验
   • 设计稿尺寸固定（如750px）
   • 希望减少对JavaScript的依赖

3. 混合方案：

   • 主体布局使用vw单位
   • 小元素和边框使用px单位
   • 特殊组件使用rem单位

五、实践中的坑与解决方案

1. 常见问题

1. 1px边框问题：

   • 问题：在高清屏上1px可能显示过粗
   • 解决方案：使用transform: scale(0.5)或媒体查询配合device-pixel-ratio

2. 字体大小问题：

   • 问题：vw单位可能导致字体过小
   • 解决方案：使用clamp()函数限制最小最大字号

   css

   复制

   下载

   css
    代码解读
   复制代码
   body {
     font-size: clamp(12px, 2vw, 16px);
   }
   

3. 第三方组件样式覆盖：

   • 问题：第三方组件使用px单位
   • 解决方案：将组件添加到selectorBlackList或使用postcss-ignore注释

2. 最佳实践

1. 设置合理的单位精度：

   javascript

   复制

   下载

   arduino
    代码解读
   复制代码
   unitPrecision: 2  // 避免过长的小数位
   

2. 处理特殊场景：

   css

   复制

   下载

   css
    代码解读
   复制代码
   /* 使用注释跳过转换 */
   /* postcss-px-to-viewport-ignore-next */
   .ignore-element {
     width: 100px;
   }
   

3. 渐进式迁移：

   • 先迁移部分页面验证效果
   • 逐步扩大迁移范围
   • 保留回滚方案

六、总结与展望

通过本次从 rem 到 vw 的迁移实践，我们获得了以下收益：

1. 性能提升：消除了JavaScript计算开销，页面渲染速度提升约15%
2. 代码简化：移除了约200行适配相关代码
3. 开发体验改善：不再需要手动计算rem值，与设计稿对应更直观
4. 维护成本降低：适配逻辑完全由CSS处理，无需额外维护

未来，随着容器查询（@container）等新特性的普及，移动端适配可能会有更多创新方案。但就目前而言，vw方案在现代化项目中仍然是最佳选择之一。

附录

1. Can I Use: Viewport Units
2. PostCSS-px-to-viewport 文档
3. 移动端适配方案对比