直接改:root的font-size不如用css变量控制，因变量可联动更新padding、line-height等依赖字号的属性，js修改更安全；只声明--font-base却无效，是因未在:root中用font-size:var(--font-base)绑定，变量仅存值不自动生效。
直接改 :root 的 font-size 不如用 CSS 变量控制，因为变量能联动更新 padding、line-height、border-radius 等所有依赖字号的属性，且 JS 修改时更安全、可预测。
为什么只声明 --font-base 却没效果
常见错误是写了 --font-base: 16px，但没在 :root 里绑定到 font-size 上。CSS 变量只是“存值”，不自动生效。
-
:root { --font-base: 16px; }✅ 声明变量 -
:root { font-size: var(--font-base); }✅ 必须这行才让1rem真正等于16px - 漏掉第二行 →
1rem仍为浏览器默认16px，变量形同虚设 - JS 修改时必须带单位：
document.documentElement.style.setProperty('--font-base', '18px')，写'18'或'18rem'都会失效
clamp() 里怎么用变量才不翻车
clamp() 本身不监听变量变化，但它能响应根字号变化——前提是至少有一项参数是 rem 单位，且该 rem 是基于动态 font-size: var(--font-base) 计算出来的。
Wjs Localizing Video
下载
用于端到端视频本地化流程的轻量编排器，路由至四个专注子技能——/wjs-transcribing-audio、/wjs-translating-subtitles...
- ✅ 正确：
font-size: clamp(0.875rem, 4vw, 1.25rem);（三项都含rem或vw，且1rem是动态的） - ❌ 错误：
font-size: clamp(14px, 1rem, 18px);（1rem可能变成20px，反而大于上下限，浏览器取上限） - ❌ 错误：
font-size: clamp(var(--fs-min), 4vw, var(--fs-max));（中间项4vw不随--font-base变，缩放时断层） - 变量值必须自带单位：
--fs-min: 0.875rem;✔️，--fs-min: 0.875;❌（非法，会被忽略）
媒体查询中修改变量的正确姿势
别在每个断点里重复写 font-size，而是统一在 :root 定义变量，再用媒体查询重设——这样所有引用 var(--fs-h2) 的地方都会同步更新。
- ✅ 所有变量必须定义在
:root，确保全局可访问 - ✅ 媒体查询中写：
@media (max-width: 768px) { :root { --font-base: 14px; } } - ❌ 错误：把变量定义在
.card { --fs-h2: 1.5rem; }，然后在@media中试图覆盖:root下同名变量——作用域不匹配，无效 - ⚠️ 注意继承：如果桌面端没写
--fs-h2，它不会延续上一个断点的值，而是回退到初始定义或unset
第三方组件字体缩放不同步怎么办
很多 UI 库（如 Ant Design、Element Plus）内部用 em 写 padding 或 line-height，这些不会随 rem 基准缩放，导致按钮变“胖”、文字挤在一起。
- 优先查文档：看组件是否支持
font-size属性透传，或提供size/scale配置项 - 若不支持，可用
!important覆盖其内部em值，但仅限关键节点（如.el-button），避免污染全局 - 测试时打开 DevTools，在 Elements 面板手动改
:root的font-size，观察布局是否整体等比响应 - 特别注意
line-height：必须用无单位值（如--lh: 1.6;），否则缩放后行高会失真
最易被忽略的是：用户系统级字体缩放（如 macOS 的「更大字体」或 iOS 的「显示与文字大小」）会影响 rem 计算，但不会影响 vw；而 text-size-adjust: 100% 必须显式设置，否则 Safari 可能双重缩放导致模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
