optimum 必须在 [min, max] 范围内，否则颜色逻辑静默失效；它不定义绿色区间，而是从 low/high 划分的三段中选择一段变绿，且需满足 min
optimum 必须落在 [min, max] 内，否则语义失效
浏览器不会报错，但颜色逻辑可能静默失效或跨引擎不一致。Chrome 可能忽略，Firefox 可能回退到默认中点，Safari 可能渲染异常——这不是兼容性问题，是配置错误。
- 写
min="0"max="100"时，optimum="-5"或optimum="105"都非法- 业务语义是“越低越好”（如错误率），应设
optimum="0"，不是负数- 语义是“越高越好”（如成功率），应设
optimum="100"，不是超限值- 后端动态传值时，建议 JS 安全校验：
Math.min(max, Math.max(min, backendOptimum))optimum 不切区间，只选中 low/high 划出的某一段为“优区间”
很多人以为
optimum自己就能定义绿色范围，其实它只是从 low/high 已划分好的三段中“挑一段”变绿。三段固定为：[min, low)、[low, high]、(high, max]。
optimum="25"配low="30"high="70"→ 落在第一段 →[min, 30)变绿optimum="85"配同上 → 落在第三段 →(70, max]变绿value="65"在第二段，但optimum在第三段 → 邻段 → 黄色（不是因为 65 离 85 差 20）- 想让 40–60% 是绿色？必须同时设
low="40"high="60"optimum="50"low 和 high 必须满足 min
只要其中任一条件不成立，整个 low/high/optimum 逻辑都会被浏览器跳过，
<meter></meter>退化为仅显示 value 占比的灰条。
low="0"+min="0"→low被忽略（必须严格大于min）high="100"+max="100"→ “高区间”消失（必须严格小于max）low="80"high="30"不报错，但语义混乱，Chrome 可能仍解析，Firefox 可能直接降级- 调试时可用 JS 快速预判：
getOptimumZone(optimum, min, max, low, high)返回'low'/'mid'/'high'颜色由区间归属决定，不是 value 和 optimum 的数值差
浏览器查表式映射：同段→绿，邻段→黄，对角段→红。别盯着
Math.abs(value - optimum)算距离。
<meter min="0" max="100" low="30" high="70" optimum="20" value="25"></meter>→ 两者都在第一段 → 绿色optimum="35"→ 落第二段 →value="25"在第一段 → 邻段 → 黄色optimum="90"→ 落第三段 →value="10"在第一段 → 对角段 → 红色- 边界值行为有差异：Chrome 认为
value === low属于第二段，Firefox 可能归入第一段，别依赖精确相等实际项目里最容易被忽略的，是没验证
optimum落在哪一段——写完标签后，别只看value显示是否“顺眼”，得手动算：它到底属于[min, low)、[low, high]还是(high, max]，而那一段是否真对应你的业务定义（比如“偏低但理想”还是“偏高才理想”）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
