.container {
font-size: 20px;
}
.container p {
font-size: 1.2em; /* 实际大小是 24px */
}
/* 使用 rem */
html {
font-size: 16px;
}
.container p {
font-size: 1.2rem; /* 实际大小是 19.2px，不随父级变化 */
}
三、rem 在响应式设计中的优势
在移动端网页开发中，rem 的最大优势就是便于统一缩放和适配不同屏幕尺寸。
比如：你可以通过媒体查询或 JavaScript 动态设置 html 的 font-size，从而让所有使用 rem 单位的元素自动跟随变化。
html {
font-size: 100px;
}
/* 元素尺寸使用 rem */
.box {
width: 2rem; /* 实际宽度 = 200px */
}
通过 JS 脚本根据屏幕宽度调整：
document.documentElement.style.fontSize = (window.innerWidth / 10) + 'px';
这样当屏幕宽度变化时，rem 的基准值也跟着变化，实现了真正的自适应效果。
四、如何设置一个合适的 rem 基准
常见的设置方式有两种：
1. 固定值设置（常用于PC端）
html {
font-size: 16px;
}
这种方式简单直观，适合桌面端页面，不考虑屏幕缩放。
2. 动态设置（适合移动端）
(function () {
var width = document.documentElement.clientWidth;
var rem = width / 10; // 基准：屏幕宽度的 1/10
document.documentElement.style.fontSize = rem + 'px';
})();
这种方式结合了 JavaScript，可让 rem 自动适应不同设备的屏幕宽度，是移动端开发中的主流做法。
五、rem 使用建议
在移动端开发中推荐使用 rem；
在设置字体、边距、间距等元素尺寸时，统一使用 rem 可保持布局一致；
注意兼容性：大部分现代浏览器都已支持 rem，放心使用；
搭配媒体查询或 flexible.js、postcss 等工具可进一步优化适配效果。
总结
rem 是一种相对于根元素字体大小的单位，适合构建灵活、可缩放的网页布局。相比传统的 px 单位，rem 更便于适配不同设备屏幕大小，是现代网页开发中非常重要的一项工具。理解 rem 的原理并灵活使用，将有助于你写出更清晰、更易维护的 CSS 代码。返回搜狐，查看更多