em 相对于父元素 font-size，嵌套易失控；rem 始终基于 html 根元素 font-size，更可控，适合响应式字体系统，其响应能力取决于根字号是否动态设置。
em 和 rem 的根本区别在哪
是相对于父元素
的倍数，嵌套层级一多就容易失控；
始终基于根元素（
）的
，更可控，适合响应式字体系统。
适合局部微调，比如按钮文字比父容器大 1.2 倍：
适合全局响应式字号，比如标题随屏幕缩放：
若
的
用
或
动态设置，
值才能真正“响应”
怎么用 vw + rem 实现平滑响应式字体
纯
静态值（如
对应
）无法自适应，必须让根字号动起来。主流做法是用
单位配合断点微调：
在
上设基础响应式字号：
或分段用媒体查询：
（即 14px）
推荐
：它比媒体查询更平滑，且无需重复写断点
注意：
中的
用
时，需测试不同设备实际渲染效果，部分
安卓
WebView 对
支持不全
为什么直接写
在响应式里容易出问题
的相对性在复杂 DOM 结构中会层层叠加，导致字体尺寸意外放大或缩小：
父元素
，子元素再写
→ 实际是
组件被复用到不同上下文时，同一行 CSS 表现不一致
框架组件（如 Ant Design、Element Plus）内部大量用
做内边距或图标尺寸，若你在外层改了
，可能连带影响布局
建议只在明确需要“跟随父文字比例缩放”的场景用
，例如：
（无单位）、
。
立即学习
“
前端免费学习笔记（深入）
”；
Trae win
Trae Windows 官方版本现已全面支持 Win10 和 Win11 系统（64位）。国内开发者可直接访问 Trae 中文官网（trae.cn 或 trae.com.cn），一键下载官方正版 .exe 安装包，享受国内直连的高速稳定体验。安装过程极其简便，双击即可运行，并支持一键无缝导入 VS Code 或 Cursor 的原有主题、快捷键及插件配置。登录支持手机号、微信或稀土掘金账号。内置免费的豆包与 DeepSeek 等顶级大模型，让你开箱即用，轻松开启高效的 AI 智能编程之旅。
下载
移动端适配
时 rem 的常见陷阱
很多老教程教你在 JS 里动态算
的
（如
），现在已不推荐：
现代 CSS 原生支持
和
，无需 JS 干预
JS 计算有延迟，页面首屏可能闪动（FOUC）
横竖屏切换时，
变化不一定触发重排，需监听
，但频繁触发又影响性能
如果用了
缩放（如
），JS 获取的
会失真
真正要关注的是：确保设计稿基准宽度（如 375px）和你设定的
基准一致，并统一用
到
的转换工具（如 PostCSS 插件），避免手算错误。
的响应能力不来自它自己，而来自你如何控制根元素字号——这个控制点一旦松动，整套字体系统就失去响应意义。
emfont-sizeremhtmlfont-sizeemfont-size: 1.2emremfont-size: 2.5remhtmlfont-size%vwremrem16px1remvwhtmlfont-size: clamp(14px, 4vw, 18px)@media (max-width: 768px) { html { font-size: 87.5%; } }clamp()clamp(min, preferred, max)preferredvwclampfont-size: 1.5ememfont-size: 1.2remfont-size: 1.5em1.5 × 1.2rem = 1.8rememfont-sizeemline-height: 1.5padding: 0.75em 1emhtmlfont-sizedocument.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px'clamp()vwwindow.innerWidthresizeviewportinitial-scale=0.5innerWidthrempxremrem