应在 html 元素上设置基础 font-size（如 16px），而非 body，因为 rem 以 html 为根基准；body 可设 font-size: 1rem 以继承并确保默认文本大小；推荐用 :root 自定义属性统一管理，便于响应式与主题切换。
统一管理页面整体字号，最常用也最有效的方式就是通过
设置基础
，再配合相对单位（如
）来控制其他元素的字体大小。
为什么用
设置基础字号？
因为
是相对于根元素（即
）的字体大小，但实际开发中，我们常把基础字号设在
上，并同时设置
（
浏览器
默认值），这样能保持一致性。更推荐直接在
上设置基础值，但若项目已约定用
，也可通过继承机制让子元素默认沿用——不过要注意：
本身不直接影响
计算，真正决定
基准的是
元素的
。
正确做法：在
上设基准，
可设默认字号
为避免混淆，建议按标准方式操作：
统一基准
：在
元素上设置基础字号，例如
全局继承
：
（即继承
html
的 16px），确保段落、列表等默认文本有合理大小
响应式适配
：可结合媒体查询或
动态调整 html 的 font-size，实现字号随屏幕变化
组件内使用 rem
：标题、按钮、提示文字等全部用
，如
（= 40px 当基准为 16px）
进阶技巧：用 CSS 自定义属性统一控制
如果希望更灵活地切换或调试字号体系，可以用 CSS 变量：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
前端免费学习笔记（深入）
”；
在
中定义
后续修改只需改一个变量，所有 rem 值自动响应
支持 JS 动态修改，例如适配用户偏好或夜间模式
注意事项
别忽略这些细节：
不要只设
就以为全站变大了——
不会因此改变，除非你同步改了
的值
避免混用
和
造成维护困难，尤其在设计系统中应明确规范
移动端注意
缩放可能影响实际渲染，必要时用
（谨慎使用）
bodyfont-sizerembodyremhtmlbodyhtml { font-size: 16px; }htmlbodybodyremremhtmlfont-sizehtmlbodyhtmlhtml { font-size: 16px; }body { font-size: 1rem; }clamp()remh1 { font-size: 2.5rem; }:root--base-font-size: 16px;html { font-size: var(--base-font-size); }body { font-size: 18px; }remhtmlpxremviewporttext-size-adjust: none;