@media (color-gamut: p3) 仅表示设备支持p3色域，不能自动提升颜色饱和度；必须用 @supports (color: color(display-p3 0 0 0)) 包裹 color(display-p3 1.0 0.0 0.0) 才生效，且需srgb fallback。
不能靠 @media (color-gamut: p3) 单独设置高饱和度颜色——它只告诉浏览器“设备支持P3”，不触发任何颜色升级，更不会把 rgb() 自动变艳。
为什么 @media (color-gamut: p3) 不能直接设高饱和色
这个媒体查询只是硬件能力信号，和 @media (prefers-color-scheme: dark) 类似，仅用于环境判断。写了 @media (color-gamut: p3) { color: rgb(255, 0, 0); }，结果仍是 sRGB 红，毫无变化。Chrome 117+ 和 Safari 16.4+ 支持该查询，但 Firefox 至今不支持（2026年9月仍为 false）。
color(display-p3) 是唯一生效的颜色写法
要真正提升饱和度，必须显式使用 color(display-p3) 函数，并满足以下全部条件：
- 分量必须是
0.0–1.0小数，不能写整数（color(display-p3 1 0 0)错，color(display-p3 1.0 0.0 0.0)对） - 空格不可省略，斜杠分隔 alpha：
color(display-p3 0.9 0.2 0.3 / 0.8)，不是rgba()风格 - 必须用
@supports (color: color(display-p3 0 0 0))包裹，这是验证浏览器引擎是否支持该语法的唯一可靠方式 -
@supports块不能嵌套在@media (color-gamut: p3)里——逻辑不同，叠加反而增加失效概率
必须写在 @supports 外层的 sRGB fallback
没有 fallback，旧浏览器或不支持环境会直接无颜色（不是变灰，是透明或继承色）：
.brand-red {
color: #FF6B6B; /* 先写 sRGB 值，保底 */
@supports (color: color(display-p3 0 0 0)) {
color: color(display-p3 0.98 0.35 0.35); /* 后写 P3 值，覆盖 */
}
}
- 别用
rgb()或#hex混在@supports块里当 fallback——它必须在外层 -
background-color对color(display-p3)支持最差，iOS Safari 常静默降级；改用background-image: linear-gradient(color(display-p3 ...), color(display-p3 ...))更稳 - 真机调试前确认三件事：设备是 iPhone 12+/Mac Studio/M3 MacBook Pro、系统广色域已开启、页面通过 HTTPS 加载（
file://协议不触发）
最容易被忽略的是：P3 值不能从 sRGB 十六进制直接换算，必须用 Photoshop 的 “Display P3” Proof Setup 或 Figma 插件取值——填错一个数字或漏个空格，整条声明就被 WebKit 静默丢弃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
