code标签字体大小不随根字号变化，根本原因是使用了px或em等固定/相对单位而非rem；必须改用font-size: 0.8125rem或clamp(12px, 0.8125rem, 14px)确保响应式缩放，并覆盖第三方高亮库中写死的字号规则。
code 标签字体大小不随根字号变化？先确认是否用了 rem
绝大多数 code 标签字体变小、不响应用户调节，根本原因是它被写了 font-size: 12px 或 font-size: 0.75em 这类固定值或父级依赖值。rem 才是唯一能跟 document.documentElement.style.fontSize 同步缩放的单位。
检查你 CSS 中对 code 的定义，如果看到类似：
code { font-size: 13px; }
或
code { font-size: 0.8125em; }
——这两者都会在用户调大根字号时“卡死”，必须改成基于 rem 的写法：
-
code { font-size: 0.8125rem; }（假设基准 16px，0.8125rem = 13px） - 更稳妥的是用
clamp()：code { font-size: clamp(12px, 0.8125rem, 14px); }，保证最小可读、最大不溢出 - 避免在
code上设!important，它会拦截 JS 动态设置的根字号继承
为什么给 body 或 pre 设 font-size 不管用
给 body 设置 font-size，code 不会自动继承——因为浏览器默认样式表里 code 是 font-family: monospace + 独立 font-size，且多数 reset 库（如 normalize.css）已显式声明了它的字号。
直接改 pre 更无效：pre 通常包裹 code，但 code 自身有更高优先级的字体规则，且 pre 的字号不影响其子元素的 rem 计算基准。
正确路径只有一条：
- 确保
html元素的font-size是动态可调的（比如通过滑块控制） -
code必须用rem或clamp(..., rem, ...)定义字号 - 不要在任何地方覆盖
code的font-size为 px/em/%
移动端 code 字太小看不清？加最小渲染兜底
即使用了 0.8125rem，在 iPhone SE 这类窄屏上，若用户把根字号调到 87.5%（14px），code 就只剩约 11.4px，低于 Safari 最小渲染阈值（11px），文字发虚甚至错位。
解决办法不是硬写 12px，而是用 clamp() 强制下限：
code {
font-size: clamp(12px, 0.8125rem, 14px);
}
注意三点：
-
clamp()第一个参数必须是绝对单位（12px或0.75rem），不能是vw - 中间 preferred 值推荐用
rem，才能和用户调节联动 - 别写
clamp(12px, 4vw, 14px)——vw在小屏下仍可能跌破 12px，且高 DPI 屏上计算偏差明显
第三方代码高亮库（如 highlight.js）里的 code 不响应？查 class 注入点
highlight.js、Prism 等库生成的 code 往往带 class（如 <code class="js">），它们的 CSS 规则常写死 font-size: 13px 或用 em 相对于 pre，完全绕过根字号。
调试步骤：
- 打开 DevTools → 选中高亮后的
code元素 → 看 Computed 面板里font-size最终值是多少，来源是哪条 CSS 规则 - 找到对应库的 CSS 文件（如
highlight.min.css），定位到code或.hljs相关规则 - 覆盖它：在你自己的 CSS 末尾加一条高优先级规则，例如
.hljs code, .hljs { font-size: 0.8125rem !important; }（!important此处必要，因库 CSS 通常内联或优先级高） - 更干净的做法：用库提供的主题 API，比如 Prism 支持
theme配置项，传入自定义 CSS 变量
最易被忽略的一点：所有 code 相关样式必须脱离 px 和 em 的“惯性依赖”，哪怕只有一处漏网，整个调节链就断了。别指望 body 改了字号它就跟着变——它早就被 reset、框架、高亮库层层锁死了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
