直接改:root的font-size最快，但必须搭配rem单位且所有字体属性显式引用var(--font-base)，否则变量修改无效；:root{font-size:var(--font-base,16px)}才是关键兑现行。
直接改 :root 的 font-size 最快，但要全局生效，必须搭配 rem 单位 + 所有字体属性显式引用变量，否则 JS 或媒体查询改了也白改。
为什么只写 :root { --font-base: 16px } 不起作用
变量声明 ≠ 样式生效。CSS 变量只是“存起来”，不自动注入到任何属性里。
- 漏掉
var(--font-base)引用：比如h1 { font-size: 1.5rem; }→ 它压根不看变量，改了--font-base毫无反应 - 写在非
:root作用域：如.header { --font-base: 18px; }→ 其他地方根本读不到 - 单位缺失：设成
--font-base: 16（缺px或rem）→ 后续calc()或var()计算时静默失败 - 被
!important硬覆盖：某处写了font-size: 20px !important→ 变量再怎么动都无效
:root 中该设什么、怎么设才真正可控
核心是让根字号本身成为变量驱动的输出，而不是只存一个中间值。
- 正确写法：
:root { font-size: var(--font-base, 16px); }—— 这行才是关键，它把变量“兑现”为实际根字号 - 初始值建议用
1rem而非16px，避免缩放时与用户系统设置冲突 - 若需多级阶梯控制（如小屏/中屏/大屏），定义多个变量：
--font-base-sm: 14px、--font-base-md: 16px，再用媒体查询切换font-size: var(--font-base-md) - 别在媒体查询里直接改
html { font-size: 18px; }，否则会覆盖 JS 动态设置 —— 统一走:root变量 +var()引用路径
clamp() 和 rem 混用时的三个典型翻车点
clamp() 不感知变量变化，它只认当前计算上下文；想让它响应缩放，必须让至少一项是 rem 基准。
立即学习“前端免费学习笔记（深入）”；
-
clamp(14px, 4vw, 18px)→ 完全不随--font-base变，因为三项全是绝对或视口单位 -
clamp(1rem, 4vw, 1.25rem)→ 正确，1rem和1.25rem都依赖根字号，缩放时整体浮动 -
clamp(0.875rem, 2rem, 1.125rem)→ 危险！当根字号放大到24px，中间项2rem = 48px可能远超上下限，导致实际取上限，失去弹性意义 - 移动端小屏下
4vw可能趋近于0，clamp()锁死最小值 —— 建议加媒体查询兜底，而非纯靠clamp()
JS 动态修改时最容易忽略的细节
调用 setProperty 看似简单，但单位、作用域、继承链三处极易出错。
- 必须带单位：
document.documentElement.style.setProperty('--font-base', '18px')—— 写成'18'就失效 - 别用
document.querySelector('html').style...，要锁定document.documentElement - 如果页面已用媒体查询重设过
:root变量，JS 设置会被覆盖 —— 解决办法：媒体查询内也用var(--font-base)，JS 改变量，媒体查询只负责“选值” -
line-height必须用无单位值（如1.5），否则line-height: calc(var(--font-base) * 1.5)会导致嵌套放大
最常被跳过的验证步骤：打开 DevTools，在 Elements 面板手动编辑 :root 的 font-size，看整个页面是否等比缩放。只要这一步卡住，说明某处漏了 rem 或硬编码了 px —— 这比写一百行 JS 更快定位问题。
