<meter> 标签不适合做温度计，因其仅按数值比例渲染单色条、不支持刻度线与负值视觉对齐，且 low/high/optimum 在温度场景中语义失效；真正实现需用 <div> + CSS scaleY() + 自定义逻辑。
meter 标签根本不适合做温度计刻度
它不渲染刻度线，也不支持温度区间内的非线性映射或负值视觉对齐——<meter> 只计算 value 在 [min, max] 中的归一化比例（即 (value - min) / (max - min)），然后画一条单色填充条。所谓“温度计效果”，是开发者误把 <meter> 当成 SVG 或 CSS 温度柱体用的结果。
为什么 temperature 场景下 meter 的 min/max/value 易出错
温度有自然负值（如 −15℃），但 min 和 max 必须是数字且 min < max；若写成 min="-20" max="50" 是合法的，但很多开发者漏掉负号、或传入字符串 min="-20°C" 导致解析失败。更隐蔽的问题是：浏览器内部归一化时，会把 value="-5" 算作 (−5 − (−20)) / (50 − (−20)) = 0.214，即约 21.4% 高度——可用户直觉里“0℃”该在中间，而这里 0℃ 对应的是 (0 + 20) / 70 ≈ 28.6%，不是 50%。
-
min和max必须为纯数字，不能带单位或符号字符 - 负值范围下，0 不等于视觉中点，需手动换算比例再填
value -
low/high在负温场景中极易设错：比如low="0"在min="-20"下实际是偏高段，语义失效
meter 的 low/high/optimum 在温度场景中基本失效
浏览器只按数值大小判断状态，不理解物理意义。例如设 min="-20" max="50" optimum="20" low="10" high="30"，那么 value="15" 落在 low 和 high 之间，本意是“舒适区间”，但浏览器只把它当普通中间值着色——且不同内核对同一配置的着色逻辑不一致（Chrome 可能绿，Firefox 可能灰）。更关键的是：optimum 无法表达“20℃ 是人体舒适温度”这种领域知识，它只是个数值锚点，不触发任何温度相关语义。
-
low必须 >min，high必须< max，否则整个语义被忽略 - 若
optimum设为边界值（如optimum="-20"），浏览器仍按数值渲染，不会加“极寒”提示 - 无障碍阅读器读出的是“15 在 −20 到 50 之间”，而非“15 摄氏度，处于舒适范围”
真正要做温度计，得放弃 meter 标签
原生 <meter> 本质是语义化标量定位器，不是图形组件。要实现带刻度、负值对齐、液柱动画的温度计，必须用 <div> + CSS transform: scaleY() + 自定义刻度生成逻辑。核心是把温度值映射到 0–1 区间后，驱动柱体高度和刻度标签位置，同时用 data-* 属性保留下文语义，供 JS 和 ARIA 补充。
立即学习“前端免费学习笔记（深入）”；
- 柱体容器固定高度 +
overflow: hidden，内部柱子设transform-origin: bottom - 刻度线用 flex 布局 +
data-temp="-20"等属性精准定位，避免像素误差 - 温度变化时只更新 CSS 自定义属性（如
--temp-ratio），不操作 DOM 或重设 style
别指望 <meter> 自动帮你画水银柱或标摄氏度刻度——它的职责仅限于告诉屏幕阅读器“当前值在已知范围内处于什么位置”，其余全是你的事。
