color-gamut媒体查询仅检测设备色域（如srgb、p3），不控制渲染；需配合color(display-p3...)等宽色域语法及@supports校验才能生效，否则颜色会降级为sRGB。
什么是color-gamut媒体查询，它真能控制颜色显示？
不能。color-gamut 媒体查询只读不写——它只能检测设备屏幕支持的色域范围（如 srgb、p3、rec2020），但**不会自动改变颜色渲染方式**，也不会触发浏览器做色彩空间转换。它的作用是让你“知道”当前设备大概能显示多广的颜色，从而决定是否启用更鲜艳的配色方案。
怎么用color-gamut判断P3屏并加载对应CSS？
典型写法是结合 @media 和 color-gamut，但要注意：必须配合实际可用的色彩空间语法（如 display-p3）才能生效，否则即使匹配了媒体查询，颜色仍会退回到 sRGB 渲染。
- 只写
@media (color-gamut: p3)不够——它只是条件，没指定用什么颜色值 - 必须在匹配块里显式使用
color(display-p3 ...)函数或lab()/lch()等宽色域函数 - 旧版 Safari（iOS 16.4 之前）不支持
color(display-p3)，只认device-p3（已废弃，且仅限background等少数属性）
示例：
@media (color-gamut: p3) {
.hero {
background-color: color(display-p3 1 0.2 0.3);
}
}
为什么写了color-gamut却没看到颜色变化？
常见原因不是媒体查询没命中，而是颜色值本身被降级了。浏览器对宽色域颜色的支持非常挑剔：
-
color(display-p3 ...)中的数值超出 P3 色域范围时，部分浏览器（如 Chrome）会静默截断，而非报错 - CSS 变量无法直接存
color(display-p3 ...)值（Safari 16.4+ 才开始有限支持） - 如果父元素或祖先设置了
color-scheme: light或强制 sRGB 渲染上下文（如某些 WebKit 内嵌 WebView），display-p3可能被忽略 - 开发者工具里看到的“Computed”颜色永远是 sRGB 格式——这是调试器的限制，不代表实际渲染结果
实际项目中该不该依赖color-gamut做主题切换？
慎用。目前真正稳定可用的场景极少：
- 高端 iOS/macOS 设备（Safari + macOS Ventura/iOS 16.4+）对
display-p3支持较好；Android Chrome 仍基本无视 - 即使检测到
p3，也得确保设计系统所有颜色都经过 P3 色域校验，否则局部鲜艳、局部发灰 - 没有 fallback 机制的
color(display-p3)在不支持环境会直接失效（变成 transparent 或 inherited）
更稳妥的做法是：用 color-gamut 作为增强信号，搭配 @supports (color: color(display-p3 0 0 0)) 二次确认，再决定是否启用整套 P3 调色板——毕竟媒体查询说的是“能力”，@supports 验证的是“实现”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
