直接用 flex-grow 或 grid 不够，因仪表盘需自适应的是可视化组件的视觉状态（如环形图角度、进度条宽度），而非仅布局空间分配；CSS变量才是连接JS数据与CSS样式的轻量通道。
为什么直接用 flex-grow 或 grid 不够？
因为仪表盘里真正“自适应”的不是布局容器，而是数据可视化组件本身——比如环形图指针角度、进度条宽度、颜色阈值。这些值必须随数据实时变化，且不能破坏响应式结构。单纯靠 flex 或 grid 只能分配空间，无法驱动视觉状态。CSS变量才是连接 JS 数据和 CSS 样式的唯一轻量通道。
conic-gradient + --value 实现环形图动态填充
这是最常踩坑的环节：很多人写 conic-gradient(red 75%, lightgray 75%)，但硬编码数值无法响应变化。正确做法是把百分比抽成变量，并确保它始终落在 0–100 范围内：
- HTML 中给容器加内联样式：
style="--value: 75%;" - CSS 中使用：
background: conic-gradient(red var(--value), lightgray var(--value) 100%); - JS 更新时必须带单位：
el.style.setProperty('--value', `${val}%`)，漏掉%会导致整个渐变失效 - 超出范围的值要先归一化：
Math.min(100, Math.max(0, val))，否则conic-gradient在 Safari 中会崩溃
用 grid-template-areas 配合 :root 变量控制主题与断点
仪表盘需要同时适配深色模式和移动端，但不能写两套布局代码。方案是把区域名、尺寸、颜色全部参数化：
- 定义主题变量：
:root { --theme-bg: #ffffff; --theme-text: #333; --grid-areas: "header header" "sidebar main"; } - 深色模式覆盖：
.dark-theme { --theme-bg: #121212; --theme-text: #e0e0e0; } - 移动端重定义：
@media (max-width: 768px) { :root { --grid-areas: "header" "main" "sidebar"; } } - 在容器上用：
grid-template-areas: var(--grid-areas);—— 注意：变量不能直接用于grid-area，只能用于grid-template-areas
JS 更新变量时最容易忽略的三个细节
变量设了，但视图不动？大概率卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
- 更新目标元素错误：必须作用于拥有该变量作用域的祖先节点，比如想让整个仪表盘响应，就该设在
document.documentElement或最外层.dashboard容器上，而不是某个子卡片 - 变量名拼写不一致：CSS 里写
--progress，JS 却调用setProperty('--progression', ...)，浏览器静默忽略，无报错 - 动画未启用过渡：变量变了，但没写
transition: background-color 0.3s, transform 0.3s;，导致变化突兀或不可见
真正难的不是写几行变量，而是让变量在 DOM 层、CSS 层、JS 层之间保持语义一致，且不被浏览器优化掉。每次改完记得检查 computed styles 面板里变量是否真实生效。
