meter 标签在实际项目中的常见使用场景与写法

标签用于表示固定范围内的标量测量值（如磁盘使用率、投票得分、剩余天数），语义明确、可访问性好；支持 min/max/value/low/high/optimum 属性，浏览器自动着色，适合状态快照而非进度动画。

meter 标签用于表示已知范围内的标量测量值（如磁盘使用率、投票占比、完成进度等），它不是进度条（progress），而是“当前值在固定区间中的位置”，语义明确、可访问性好，但实际项目中常被误用或忽略。

展示资源使用率（如磁盘、内存、配额）

这是 meter 最典型的用途：有明确最小值、最大值和当前值的静态度量。

例如显示用户当前存储使用情况：

68% used

其中：
– low 和 high 定义“正常区间”的边界（低于 low 为优，高于 high 为差）
– optimum 指出理想值（默认居中，设为 50 表示中间最优）
– 浏览器会据此自动切换背景色（如 chrome 中绿色/黄色/红色），无需额外 css

呈现投票结果或评分占比

当需要表达“某项得分占总分的比例”且该比例具有业务含义时，meter 比纯数字 + 文字更语义化。

比如一个满意度调查结果（满分 5 分，当前均分 4.2）：

4.2 / 5

注意：
– min/max 应与业务单位一致（不必强制归一化到 0–100）
– 若后端返回的是百分比（如 84），但原始量纲是“10 分制”，建议先换算再传值，保持语义真实

配合 js 动态更新状态（非动画进度）

meter 支持 JS 修改 value、min、max 等属性，适合实时反映变化但不强调“过程”的场景。

• 监控面板中 CPU 占用率每秒更新：直接改 meter.value = data.cpu
• 活动倒计时剩余天数（如“还剩 3 天，目标 7 天”）：3/7 days
• 避免用它做加载动画——那是 progress 的职责；meter 表达的是“此刻的状态快照”

无障碍与样式适配要点

屏幕阅读器会读出 meter 的值、范围及状态（如“68 percent, suboptimal”），前提是内容文本存在（即标签内要有可读文字）。

自定义样式时注意：
– Chrome/firefox 对 meter 的伪元素支持有限（::-webkit-meter-inner-element 等需谨慎使用）
– 更推荐用包裹容器 + CSS 控制整体外观，保留原生语义和基础交互
– 不要仅靠颜色传达状态（如红/绿），务必搭配文字提示或图标