meter 的 low、high、optimum 仅在 min 和 max 存在且 value 在范围内时触发浏览器语义着色，不控制逻辑；需满足 min ≤ low ≤ high ≤ max，optimum 必须在 [min, max] 内，且跨浏览器渲染不一致。
meter 标签的 low、high、optimum 到底怎么设才有效？
这三个属性只有在 min 和 max 同时存在且 value 在范围内时，才会触发浏览器对背景色的语义渲染（如 Chrome 会把低于 low 的区域标为橙黄，高于 high 标为红，optimum 附近标为绿）。但它们**不控制数值逻辑**，也不影响 DOM 行为或 JS 计算——只是视觉提示信号。
常见错误是只写 low="70" 却漏掉 min="0" max="100"，结果浏览器直接忽略所有语义色；或者把 optimum 设成 50，但 value="45" 时发现没变绿——因为 optimum 必须落在 [min, max] 内，且浏览器只按“接近程度”做渐变着色，不是开关式判定。
-
low和high必须满足：min ≤ low ≤ high ≤ max，否则无效 -
optimum可以等于low或high，也可以在中间，但不能超出[min, max] - Chrome/Firefox 渲染逻辑不同：Chrome 对
optimum偏好中心区域着色，Firefox 更依赖相对位置，别指望跨浏览器像素级一致
健康仪表盘里，用 meter 显示心率/血糖/压力值的实际限制
meter 适合展示「单维度、有明确安全区间」的指标，比如静息心率（60–100 bpm）、空腹血糖（3.9–6.1 mmol/L）。但它**无法表达多状态标签（如“偏低”“正常”“需复查”）或动态阈值**——这些得靠 JS 配合 class 切换或额外 DOM 元素补充。
例如显示血压：<meter value="135" min="0" max="250" low="90" high="140" optimum="115"></meter>，这能直观反映收缩压偏高，但无法自动标出“135/85 mmHg —— 1级高血压”，后者必须由 JS 判断后插入文字或图标。
- 不要用
meter替代状态文案：它不支持 aria-label 动态更新，屏幕阅读器只读数值，不读“偏低”含义 - 移动端小屏下 meter 默认高度难控制，建议用
height+transform: scale()微调，而非改 font-size - IE 完全不支持
meter，如需兼容，得 fallback 到progress+ 自定义背景色，或纯 div + JS 渲染
如何让 meter 的颜色反馈更可靠、可维护？
浏览器原生颜色不可定制，且各版本渲染有差异。真正可控的方式是用 CSS 自定义 track 和 fill 区域，但注意：Chrome 从 99+ 开始要求显式启用 appearance: none 才能覆盖默认样式，而 Firefox 仍部分受限。
meter {
-webkit-appearance: none;
appearance: none;
}
meter::-webkit-meter-bar { background: #e0e0e0; }
meter::-webkit-meter-optimum-value { background: #4caf50; }
meter::-webkit-meter-suboptimum-value { background: #ff9800; }
meter::-webkit-meter-even-less-good-value { background: #f44336; }
- Firefox 不支持
::-moz-meter-bar等伪元素，只能靠 JS 插入带 class 的 wrapper div 模拟 - 若项目已用 Tailwind，别试图用 utility class 直接修饰
meter，它的伪元素不响应大多数 class，得写@layer components扩展 - 测试时务必在真实设备上验证颜色对比度：很多“绿色 optimum”在 OLED 屏上灰得看不见，WCAG 至少要 4.5:1
替代方案比硬刚 meter 更省事的场景
当你的健康仪表盘需要支持趋势箭头、单位切换（mmol/L ↔ mg/dL）、点击展开历史图表、或多人数据并排比较时，meter 就成了累赘。这时候用 <div role="progressbar"> + ARIA 属性 + SVG 进度条，反而更灵活、可测、易调试。
<ul>
<li>用 <code>aria-valuenow、aria-valuemin、aria-valuemax 保证无障碍，再加 aria-valuetext="血糖偏高（5.8 mmol/L）" 补充语义
<div class="gauge-container"> + JS 初始化，开发效率和后续扩展性都更高
<p>meter 是个轻量语义化选择，但健康数据容错率低，用户一眼就要懂——别为了“用对了 HTML 标签”牺牲信息传达的确定性。</p>
</div>
