移动端适配方案对比：rem、vw和flex哪种更好用

移动端适配没有“哪种更好”，只有“各管一段”：**vw 负责随视口等比缩放尺寸，rem 负责以根字号为基准的缩放，flex 负责元素之间的排布。结论是：新项目优先用 vw（配 postcss-px-to-viewport）+ flex 布局**，只有需要限制最大宽度、兼容老旧 WebView 或做“字号不跟随缩放”时，才回到 rem。

rem、vw、flex 到底有什么区别？

结论：三者不在一个维度上，flex 不是 rem/vw 的替代品，而是它们的搭档。

rem（root em）是相对单位，1rem 等于 <html> 的 font-size；vw（viewport width）也是相对单位，1vw 等于视口宽度的 1%；flex 是布局模式，解决的是“子元素怎么排列、怎么分配剩余空间”。

所以常见误区是把 flex 当成适配方案——flex 把一行三个卡片平均分开没问题，但它不会让卡片本身在 375px 和 414px 屏幕上按比例变大变小。真正干“缩放”这件事的只有 rem 和 vw。

rem 适配怎么做？

结论：rem 的本质是“用 JS 或媒体查询动态改根字号”，设计稿 750px 时通常让 1rem = 75px。

具体步骤：

1. 引入 amfe-flexible 或自己写一行：document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'（375px 屏 → 1rem = 37.5px）。
2. 用 postcss-pxtorem 自动换算，配置 rootValue: 75，这样设计稿上 75px 的按钮写出来就是 1rem。
3. 设一个上限，避免大屏字体飞掉：@media (min-width: 768px) { html { font-size: 75px } }。

注意点：安卓部分 WebView 和国产浏览器有最小字号限制，会把小于 12px 的文字强行放大，导致 rem 方案在 320px 小屏上破版。另外 rem 依赖 JS 执行，首屏可能出现“字号闪烁（FOUC）”，需要把设置脚本内联在 <head> 里。

vw 适配怎么做？

结论：vw 不需要 JS，纯 CSS 就能等比缩放，是目前最省心的方案。

配置示例：postcss-px-to-viewport 中设 viewportWidth: 750、unitPrecision: 5，设计稿 100px 的元素输出为 13.33333vw，在任何宽度下都自动等比。

两个必须处理的坑：

• 1px 边框消失：750 设计稿下 1px = 0.13333vw，在 375px 屏上算出来是 0.5px，部分浏览器直接渲染不出。做法是把边框写死成 1px 并加入 selectorBlackList 跳过转换，或用 transform: scaleY(0.5) 模拟。
• 桌面端放大过度：vw 在 1440px 桌面上会把内容撑得巨大。解决方式是给外层容器 max-width: 750px; margin: 0 auto;，并对 min-width: 768px 做媒体查询锁定尺寸。

另外，整屏高度用 100dvh 而不是 100vh，底部固定栏加 padding-bottom: env(safe-area-inset-bottom)，这两条能避免 iOS 地址栏和刘海屏的常见错位。

flex 在适配里扮演什么角色？

结论：flex 只做布局，不做缩放，两者职责不要混。

典型组合是“vw 定尺寸 + flex 定排布”：卡片宽度用 vw 保证等比，卡片内部用 display: flex; justify-content: space-between; align-items: center 排列，间距用 gap: 2vw。文字大小则推荐 clamp() 兜底，例如 font-size: clamp(12px, 3.7vw, 18px)，保证小屏不小于 12px、大屏不超过 18px。

实际项目该怎么选？

结论：vw 打底 + flex 布局 + clamp 控字号，是 2024 年之后新项目的最优解；rem 留给需要兼容旧设备或必须按根字号整体缩放的场景。

判断口诀：只做等比缩放 → vw；需要动态基准、要跟第三方组件库字号联动 → rem；只关心元素之间的相对关系 → flex。三者混用时，把换算插件配在构建流程里（Vite/Webpack 均可），别手动换算，否则一次改版就会留下成片对不上的数值。

收束一句：适配的难点从来不是选哪个单位，而是明确“哪些东西要跟着屏幕缩放、哪些必须固定”，把这条线划清楚，vw、rem、flex 就各归其位了。