@media (color-gamut: p3) 单独使用无效，因它仅提示设备能力，不保证渲染；必须配合 @supports (color: color(display-p3 0 0 0)) 检测语法支持，并用 color(display-p3) 函数+专业转换值才能呈现更艳红绿。
直接用 @media (color-gamut: p3) 加载高饱和颜色，大概率失效——它只提示“设备可能支持”，但不保证浏览器能渲染出更艳的红或绿；真要生效，必须配合 color(display-p3) + @supports 检测，且避开常见合成陷阱。
为什么 @media (color-gamut: p3) 单独用没用
这个媒体查询只是操作系统告诉浏览器“这台设备默认色域是 P3”，但浏览器是否启用 P3 渲染管线，完全另算。常见失效场景包括：
-
@media (color-gamut: p3)匹配成功，但background-color: color(display-p3 1 0 0)仍被静默降级为#ff0000（sRGB 最大红） - Firefox 完全不支持该媒体查询，即使设备是 MacBook Pro，查询也永远不匹配
- 父元素用了
transform、opacity或filter，触发强制 sRGB 合成，整层颜色回退 - HTML 缺少
<meta name="color-scheme" content="light dark">，Safari 可能拒绝启用广色域路径
真正可靠的写法：用 @supports 检测语法能力
浏览器支持广色域颜色函数，和它是否上报 color-gamut: p3 是两回事。唯一能验证引擎是否真认识 color(display-p3) 的方式是：
code
@supports (color: color(display-p3 0 0 0)) {
.hero-button {
background-color: color(display-p3 0.92 0.25 0.31);
}
}
- 别嵌套在
@media (color-gamut: p3)里——叠加反而增加忽略概率 - fallback 必须写在
@supports外层，比如先写background-color: #e74c3c;，再写上面的@supports块 - 参数必须是 0.0–1.0 小数，空格不能省，
color(display-p3 92 25 31)或color(display-p3,0.92,0.25,0.31)全部无效
哪些地方最容易悄悄失效
即使 @supports 检测通过、P3 值也正确，以下情况仍会导致颜色被降级：
-
background-color是当前最不稳定的属性——iOS Safari 和多数 WebView 会绕过色彩管理，直接映射到 sRGB；改用background-image: linear-gradient(color(display-p3 1 0 0), color(display-p3 1 0 0))更可靠 - 所有 P3 值必须来自专业转换（如 Photoshop “Proof Setup → Display P3” 吸管取值），严禁把
#cc3344直接换算成color(display-p3 0.8 0.4 0.4)，两个色域三角形不重叠，数值不能线性映射 - SVG 图标若用
fill="#cc3344"，不会随 CSS 变量或 P3 规则变化；必须显式写fill: color(display-p3 0.8 0.4 0.4) - 第三方 UI 库（如 Element Plus、Ant Design）默认不读你的 P3 颜色，需查文档看是否支持自定义变量映射
别碰 color(rec2020) —— 它在网页中基本等于不存在
写了 color(rec2020 1 0 0)，浏览器不会报错，也不会渲染出更红的红，而是静默降级为 sRGB，并丢弃原始坐标。原因很实在：
-
@media (color-gamut: rec2020)几乎永远不会匹配——没有主流操作系统向浏览器通告 Rec2020 为可用显示色域 - Chrome/Firefox/Safari 解析到不支持的
color()函数时，整条声明被跳过，连 fallback 都不走 - Rec2020 真正起效需要 HDR 全链路（系统配置文件 + GPU 驱动 + 视频容器），纯 CSS 渲染不在支持范围内
目前唯一具备软硬协同支持的广色域路径，就是 display-p3 + @supports + 真实转换值——其它都是看起来很美，实际调试时发现颜色根本没变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
