video-dynamic-range 是仅作用于 元素的 html 属性，用于声明视频内容动态范围（sdr/hdr），与屏幕亮度、环境光及 css 主题无关，不支持媒体查询或样式联动。
video-dynamic-range 是什么？它和屏幕亮度无关
直接说结论：video-dynamic-range 不是用于响应系统亮度或环境光的 CSS 属性，它只作用于 <video></video> 元素，且仅控制视频内容的动态范围（SDR vs HDR），与设备的屏幕亮度设置、prefers-reduced-motion 或 prefers-color-scheme 完全无关。试图用它切换背景色或主题色，会完全失效。
CSS 中真正响应屏幕亮度的方案只有 prefers-contrast 和媒体查询 + JS
目前没有纯 CSS 原生属性能读取实时屏幕亮度值。但有两个接近的、有实际支持的路径：
-
prefers-contrast: high或low：部分系统（如 macOS、iOS）在「辅助功能 → 显示」中开启高对比度时触发，可用于调整文字/边框颜色，但不反映亮度数值 -
@media (prefers-color-scheme: dark)：响应系统深色/浅色模式，间接关联亮度习惯，但仍是用户手动设置，非自动感知 - 真·亮度感知必须靠 JavaScript：使用
navigator.getBattery()（已废弃）、screen.orientation（无亮度数据）都不行；目前唯一可行的是通过window.matchMedia监听系统级媒体查询变化，再配合原生 API —— 但 Web 标准至今未暴露screen.brightness或类似接口
实际能做的：用 matchMedia 监听系统深色模式 + 手动 fallback
虽然不是亮度，但这是最稳定、兼容性最好的视觉适配方式。多数用户调低屏幕亮度时也会同步开启深色模式，可作为合理代理：
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
// 同时监听变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (e.matches) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
});
然后在 CSS 中写：
:root {
--bg: #fff;
--text: #000;
}
.dark {
--bg: #121212;
--text: #e0e0e0;
}
body {
background-color: var(--bg);
color: var(--text);
}
别踩坑：video-dynamic-range 的正确用法和限制
如果你确实需要控制视频的 HDR 行为，请只在 <video></video> 上用它，且注意：
- 它只能取
standard或high，不能用于普通元素或颜色变量 - 仅 Chromium 111+ 和 Safari 17.4+ 支持，Firefox 完全不支持
- 设置
video-dynamic-range: high不会改变页面其他部分，也不会触发任何 CSS 变量更新或媒体查询匹配 - 它依赖视频源本身含 HDR 元数据（如 PQ 曲线），否则无效
例如这样才合法：
<video controls poster="frame.jpg" video-dynamic-range="high"><source src="video.mp4" type="video/mp4"></source></video>
想靠它联动主题色？做不到。浏览器不会把它当作媒体查询条件，CSS 里也无法用 @media (video-dynamic-range: high) —— 这个语法根本不存在。
真要响应亮度，目前只能等 Screen Brightness API 进入标准（提案阶段，无厂商实现），或者接受用深色模式作为最现实的代理信号。别在 video-dynamic-range 上浪费调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
