一个章节是怎么做出来的

症状

用 B 给一个看起来不鲜艳的颜色，让 A 去匹配，怎么调都匹配不上。

原因

A 用窄高斯峰、B 用宽高斯峰。振幅相同时，宽峰的积分能量是窄峰的 3–4 倍，A 永远追不上 B 的亮度。

修复

对高斯峰按面积归一化，让振幅直接等于总功率，宽窄峰就能对称匹配。

// 改前：振幅相同，宽峰积分能量是窄峰的 3–4 倍 → A 永远追不上 B
sum += (amps[k] / 100) * gaussian(lam, peak.c, peak.w);

// 改后：按面积归一化，振幅 = 总功率，宽窄峰可对称匹配
const norm = 1 / (peak.w * Math.sqrt(2 * Math.PI));
sum += (amps[k] / 100) * gaussian(lam, peak.c, peak.w) * norm;

症状

换光源后两个样本的色差只有 ΔE≈1.7，肉眼几乎看不出，失去教学冲击力。

原因

样本反射率太平、太亮，对波长不够敏感，换光源时颜色变化被平均掉了。

修复

把样本 A 设计成对波长高度选择性（黄橙窄峰、低底噪），样本 B 用三个分离峰。结果：D65 下 ΔE=0.48（匹配），换到白炽灯 A 光源 ΔE=6.72、F2 荧光 ΔE=4.35、商用 LED ΔE=4.62（明显失配）。

症状

图表在手机上只渲染成一条窄带，高度约 150px。

原因

canvas { height: 100% } 需要父元素有明确的 height 才能解析；父元素只有 min-height 时百分比高度失效，canvas 回退到 HTML 默认的 150px。

修复

把父元素的 min-height 改成明确的 height（或让父元素进入 grid/flex 由布局给出确定高度）。

/* 失效：父元素只有 min-height，canvas 塌回 150px */
.canvas-box { min-height: 240px; }
canvas { height: 100%; }

/* 有效：父元素给明确 height，height:100% 才能解析 */
.canvas-box { height: 240px; }

症状

媒体查询里写了单列规则，但手机上多列布局没折叠。

原因

原规则是 .parent .child（两级），媒体查询里只写 .child（一级），优先级更低，覆盖不掉。

修复

媒体查询里用同等或更高优先级的选择器。

/* 不生效：优先级低于原规则 */
@media (max-width:560px){ .summary-chain{ grid-template-columns:1fr; } }

/* 生效：保持同等优先级 */
@media (max-width:560px){ .gamma-summary .summary-chain{ grid-template-columns:1fr; } }