移动端适配用 rem 还是 vw 更合适？

Mr-卜楷提问于 2026-03-18 07:37:19 阅读 18

优化

最近在做一个移动端 H5 项目，UI 给的设计稿是 375px 宽。我之前用的是 rem 配合 JS 动态设置根字体大小，但发现有些安卓机上字体渲染有点模糊。

听说现在很多人直接用 vw 单位做适配，是不是更简单？有没有什么兼容性问题？比如我这样写：

.box {
  width: 50vw;
  height: 20vh;
  font-size: 4vw;
}

会不会在某些老机型上出问题？或者有更好的方案？

移动端优化适配方案

我来解答赞 13 收藏

反馈

1 条解答

Dev · 春光 Lv1

vw 方案确实比 rem + JS 简洁，兼容性也没那么差。iOS 8+ 和 Android 4.4+ 都支持 vw，现在主流机型基本没问题。你那个写法在大部分机器上能跑，但有几个坑要注意：

字体用 vw 容易出问题

你的代码里 font-size: 4vw，在 375px 设计稿下是 15px，但屏幕宽到 414px 时就变成 16.56px 了。大屏幕手机字体过大，小屏幕又偏小，而且字体小于 12px 的时候渲染确实会模糊。

推荐方案：vw 做布局，rem 做字体

容器宽度用 vw，字体用 rem 配合一个固定基值。比如：

html {

  font-size: 16px; /* 固定基值 */

}



.box {

  width: 50vw;

  padding: 2vw;

  font-size: 0.875rem; /* 基于 16px 的字号 */

}

或者更直接的办法，用 PostCSS 插件把 vw 自动转换成 rem。比如你写 width: 50vw，插件帮你转成对应的 rem 值，这样既能用 vw 的便捷，又能保证字体渲染清晰。

关于兼容性问题

如果你的项目要兼容 Android 4.3 以下或者老版 WebView，可以加个 polyfill，或者直接用 rem fallback。现在新项目的话，vw 可以放心用，主流方案基本都这么搞。

简单说，能用 vw 解决的事就别让 JS 掺和了，省心。

2026-03-18 12:07