移动端布局：用 rem 重构你的尺寸观

在移动端开发中，你经常会遇到一个现实：不同屏幕尺寸下的布局难以统一维护。px 的绝对单位在小屏上容易显得僵硬，而 vw/vh 会随视口变化，有时反而更难把控。rem 作为一种以根字体大小为基准的单位，能更稳定地跨设备复用尺寸，是值得在项目里落地的尺寸策略。

为什么用 rem

想象你在不同手机上预览页面，导航的高度、字体的大小、间距都保持一致的体验感。这正是 rem 给你的直观收益：在一套配置下，你可以用相对单位表达设计稿上的尺寸，再通过根字体的统一换算，把设计稿的像素转化为适配的 rem，实现一套配置适配多设备。

从 0 开始搭建 rem 基准

在移动端项目中，根字体大小通常以 100 或 100rem 作为基准（对应 100px）。这样做的原因是移动端常用字体大小在 14–18px 之间，用 100rem 基准能更贴近常见设计习惯，也更便于计算。

// 主题配置（CSS/JS）
const baseSize = 100; // 100rem = 100px
const fontSize = 14 / baseSize; // 14px → 0.14rem

布局的 rem 化替换

在 CSS 中，用 rem 替换 px，建立统一的尺寸语言：

/* 代替 */
.navbar {
  height: 50px;
}

/* 使用 rem 重写 */
.navbar {
  height: 0.5rem;
}

将常用间距、边框、内边距等也统一为 rem，形成可复用的尺寸模块，减少逐项调试。

响应式与 rem 结合

在媒体查询中使用 rem 来配合断点，使不同设备上的布局变化更平滑：

@media (min-width: 768px) {
  .container {
    width: 80rem; /* 80rem = 800px，适配大屏常用宽度 */
  }
}

同时，可以用 JavaScript 动态计算 rem，结合视口尺寸与基准，实现更细腻的适配逻辑。

常见坑与解决

• 字体大小与基准不一致：确保 body 的 font-size 与基准一致，否则嵌套元素的 rem 计算会失真。
• rem 与 vw/vh 的混用：vw/vh 非常依赖视口尺寸，适合用在放缩或动态布局中，但不要在固定布局上过度依赖。
• 多端渲染差异：部分端的默认 font-size 不同，需通过 JavaScript 动态设置根字体，保证统一。

结语

用 rem 重构你的尺寸观，不只是把单位换算成另一种形式，而是建立一套在不同设备上一致体验的布局语言。从基准配置、组件尺寸模块到响应式策略，rem 能让你的代码更简洁、维护更高效。在移动端的适配实践中，少一些绝对值的试探，多一些相对值的推演，你会更从容地应对各种屏幕带来的挑战。