color-gamut媒体查询仅提示设备色域能力，不自动启用宽色域渲染；必须配合color(display-p3)显式声明且通过@supports验证支持性，再结合层叠兜底才能可靠实现p3色彩。
color-gamut媒体查询只是检测信号，不是颜色开关
它只告诉浏览器“这台设备大概能显示多广的色域”，比如返回 p3 或 sgamut，但不会自动把 rgb(255, 0, 0) 渲染成更饱和的红色。你写了 @media (color-gamut: p3)，颜色照样走 sRGB 渲染路径——除非你在里面显式用 color(display-p3)。
- 常见错误：只写媒体查询，没在匹配块里用宽色域颜色函数，结果完全没变化
- 旧版 Safari（iOS 16.4 之前）不认
color(display-p3)，只支持已废弃的device-p3，且仅限background等少数属性 - Chrome 直到 v117 才默认启用 P3 输出，部分场景需系统级设置或启动参数（如
--force-color-profile=p3）才生效
必须显式声明 color(display-p3) 才可能触发宽色域渲染
浏览器对宽色域颜色极其挑剔：不支持就静默忽略，不报错也不 fallback。所以得靠 CSS 层叠机制兜底：
- 先写 sRGB 版本：
background-color: rgb(255, 0, 0); - 再写 P3 版本：
background-color: color(display-p3 1 0 0);—— 后者在不支持环境会被跳过，保留前面的 rgb 值 -
color(display-p3)参数是线性 0–1 值，不是 gamma 压缩后的 sRGB 数值；直接把 #cc3344 换算过去会偏暗，得用专业工具校准
@supports 比 color-gamut 更可靠地判断浏览器能力
color-gamut 是设备能力提示，@supports (color: color(display-p3 0 0 0)) 才是真正验证浏览器是否能解析该语法。两者组合才是稳妥路径：
- 单独用
@media (color-gamut: p3)可能命中 Android 高端机，但 WebView 根本不支持color(display-p3)，结果白配 - 推荐写法：
@media (color-gamut: p3) and (supports(color: color(display-p3 0 0 0))) - Safari 16.4+ 支持较好；Chrome 对
color(display-p3)的支持仍不稳定，尤其在某些 WebKit 内嵌环境里会被祖先元素的color-scheme强制降级
别指望 dynamic-range 媒体查询控制颜色模式
@media (dynamic-range: high) 只反映 HDR 显示能力，和 sRGB/P3 色彩空间完全无关。它既不触发宽色域渲染，也不影响 color() 函数行为。
- 目前仅 Safari 16.4+ 部分实现，Chrome/Firefox 完全不支持
- 即使设备开启系统级 HDR，该查询也可能返回
standard—— 它不读取用户设置，只依赖底层渲染管线上报 - 拿它包裹 P3 颜色是典型误用：既无作用，又增加不可靠条件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
