在做移动端 Web 开发时，你一定会遇到这样的问题：
页面在不同尺寸的手机上显示效果不一致
宽度还能用流式或 flex 解决，高度和整体比例却乱了
设计稿是 750px，手机却五花八门
这时候，rem 布局几乎是绕不开的一关。
这篇文章我会从「为什么需要 rem」开始，逐步讲清楚 rem 的原理、配合媒体查询的适配方案，以及目前主流的 flexible.js 方案，让你真正理解：rem 到底解决了什么问题，又该怎么用。
一、为什么移动端需要 rem？
先抛出三个核心问题：
页面布局和文字能不能随着屏幕大小一起变化？
流式布局和 flex 更多解决“宽度”，高度怎么办？
能不能让页面在不同设备上等比例缩放？
答案是：可以，但单靠 px 不行。
px 是绝对单位
不同设备下，px 的视觉尺寸并不相同
写死 px，本质就是“不自适应”
而 rem 的出现，正是为了解决这个问题。
二、rem 是什么？
rem（root em）是一个相对单位。
em 是相对于父元素字体大小
rem 是相对于 html 根元素的字体大小
也就是说：
整个页面的尺寸基准，只和 html 的 font-size 有关
html {
font-size: 50px;
}
.box {
width: 2rem;
height: 2rem;
}
等价于：
.box {
width: 100px;
height: 100px;
}
如果你只改一行：
html {
font-size: 25px;
}
页面中所有使用 rem 的元素，都会 整体等比例缩小。
这正是 rem 的核心价值。
三、rem 的优势到底在哪？
相比 em，rem 有一个决定性优势：
整个页面只有一个 html
不受父元素层级影响
所有元素尺寸统一受控
换句话说：
只要控制好 html 的 font-size，就能控制整个页面的缩放比例。
这非常适合移动端。
四、媒体查询：让 rem 真正“动起来”
rem 本身只是相对单位
真正让它适配不同设备的，是 媒体查询
1. 什么是媒体查询？
媒体查询可以根据设备条件（屏幕宽度等）应用不同样式。
@media screen and (max-width: 375px) {
html {
font-size: 25px;
}
}
当屏幕宽度满足条件时，对应样式生效。
2. 常见媒体特性
width
min-width
max-width
注意：
min-width 和 max-width 都是 包含等于
3. 一个典型示例
html {
font-size: 50px;
}
@media screen and (max-width: 540px) {
html {
font-size: 36px;
}
}
@media screen and (max-width: 375px) {
html {
font-size: 25px;
}
}
配合 rem 使用后：
屏幕越小
html 字体越小
页面整体等比例缩放
五、媒体查询 + rem 的核心思想
一句话总结：
屏幕变 → html font-size 变 → rem 元素自动缩放
这就是 rem 适配的底层逻辑。
六、Less：让 rem 写起来不痛苦
如果你手算 rem，一定会很崩溃。
Less 在这里的作用是：
减少重复代码
集中管理变量
自动计算尺寸
1. Less 变量
@baseFont: 50px;
html {
font-size: @baseFont;
}
2. Less 嵌套
.nav {
width: 10rem;
a {
font-size: 0.28rem;
&:hover {
color: red;
}
}
}
3. Less 运算（重点）
@designWidth: 750;
@baseFont: 50px;
.box {
width: (100 / @baseFont) * 1rem;
}
Less 会帮你算好，最终生成纯 CSS。
七、rem 适配方案一（理解原理版）
这是教学中最常见、最利于理解的一种方案。
核心步骤如下：
设计稿宽度一般是 750px
把屏幕划分为 15 份
html 的 font-size = 屏幕宽度 / 15
页面元素统一使用 rem
举个例子
设计稿 750px
750 / 15 = 50px
html {
font-size: 50px;
}
某个元素设计稿是 100px：
width: 2rem;
当屏幕变为 375px：
375 / 15 = 25px
2rem = 50px
比例完全一致。
八、rem 适配方案二（主流方案）
目前实际开发中，更常用的是：
flexible.js + rem
这是手机淘宝团队开源的一套方案。
它做了什么？
自动监听屏幕变化
自动计算 html 的 font-size
不再手写媒体查询
你只需要：
设计稿 750px
html 基准字号 75px
页面元素 rem = px / 75
剩下的全部交给 flexible.js。
九、实际开发中的建议
rem 非常适合：
移动端页面
但要注意：
rem 是整体缩放
不适合做复杂的 PC 后台
移动端通常配合 flex 一起使用
十、总结
rem 解决的不是“布局问题”，而是比例问题。
核心逻辑只有一句话：
用 rem 描述尺寸，用 html 控制比例。
一旦理解了这一点，rem 就不再神秘，而是一个非常优雅、非常强大的移动端适配方案。
