前言
在移动端开发中，屏幕适配一直是前端工程师需要解决的核心问题之一。随着前端技术的不断发展，适配方案也从最初的媒体查询、百分比布局，逐步演进到 rem 和 vw/vh 方案。本文将基于实际项目经验，详细分享我们在 new-app 项目中移动端适配方案的演进过程，对比 rem 和 vw 两种方案的优劣，并提供完整的迁移实践指南。
一、项目背景与适配需求
new-app 是一个面向移动端的 Web 应用，需要适配从 320px 到 750px 的各种移动设备屏幕。我们的设计稿基于 750px 宽度，需要实现以下目标：
元素尺寸能够根据屏幕宽度等比缩放
保持设计稿的布局比例和视觉效果
方案简单易维护，性能良好
兼容主流移动端浏览器
二、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. 方案特点
基准设计：以 750px 设计稿为基准，将屏幕宽度分为 100 份（1rem = 屏幕宽度/100）
动态计算 ：通过 getBoundingClientRect() 获取精确的视口宽度
缩放限制：大屏幕下固定缩放比例，避免元素过大
响应式处理：监听 resize 事件，确保设备旋转时也能正确适配
3. 使用示例
在 Vue 项目中的使用方式：
javascript
复制
下载
javascript
复制代码
// main.js
import remAdapter from "./config/remConfig"
remAdapter.install(window, document);
// 组件中使用
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. 技术指标对比
特性
rem 方案
vw 方案
实现原理
JS动态计算根字体大小
原生CSS视口单位
依赖项
需要JS支持
纯CSS实现
兼容性
IE9+
IE10+（移动端基本支持）
性能
较差（需要JS计算）
更好（浏览器原生支持）
精确度
存在舍入误差
更高精度
维护成本
较高（需维护JS逻辑）
低（配置一次即可）
响应速度
可能有样式闪烁
即时响应
2. 选型建议
选择 rem 方案：
需要支持老旧浏览器（如IE9）
项目已有成熟的rem方案且运行良好
设计师提供的设计稿尺寸不固定
选择 vw 方案：
面向现代浏览器项目
追求更好的性能和开发体验
设计稿尺寸固定（如750px）
希望减少对JavaScript的依赖
混合方案：
主体布局使用vw单位
小元素和边框使用px单位
特殊组件使用rem单位
五、实践中的坑与解决方案
1. 常见问题
1px边框问题：
问题：在高清屏上1px可能显示过粗
解决方案：使用transform: scale(0.5)或媒体查询配合device-pixel-ratio
字体大小问题：
问题：vw单位可能导致字体过小
解决方案：使用clamp()函数限制最小最大字号
css
复制
下载
css
复制代码
body {
font-size: clamp(12px, 2vw, 16px);
}
第三方组件样式覆盖：
问题：第三方组件使用px单位
解决方案：将组件添加到selectorBlackList或使用postcss-ignore注释
2. 最佳实践
设置合理的单位精度：
javascript
复制
下载
arduino
复制代码
unitPrecision: 2 // 避免过长的小数位
处理特殊场景：
css
复制
下载
css
复制代码
/* 使用注释跳过转换 */
/* postcss-px-to-viewport-ignore-next */
.ignore-element {
width: 100px;
}
渐进式迁移：
先迁移部分页面验证效果
逐步扩大迁移范围
保留回滚方案
六、总结与展望
通过本次从 rem 到 vw 的迁移实践，我们获得了以下收益：
性能提升：消除了JavaScript计算开销，页面渲染速度提升约15%
代码简化：移除了约200行适配相关代码
开发体验改善：不再需要手动计算rem值，与设计稿对应更直观
维护成本降低：适配逻辑完全由CSS处理，无需额外维护
未来，随着容器查询（@container）等新特性的普及，移动端适配可能会有更多创新方案。但就目前而言，vw方案在现代化项目中仍然是最佳选择之一。
附录
Can I Use: Viewport Units
PostCSS-px-to-viewport 文档
移动端适配方案对比