color-mix() 在移动端无法真正动态适配主题色阶，因其不响应变量、不触发重计算、不支持动画，且 ios safari 16.4 前完全不支持，需严格满足三要素：小写 in srgb、字面量颜色、显式权重，并依赖层叠 fallback。
不能靠 color-mix() 在移动端“快速适配”主题色阶变换——它不响应变量、不触发重计算、不支持动画，所谓“动态”只是浏览器一次性算出一个静态值。
为什么写了 color-mix() 却在 iOS Safari 里没反应？
绝大多数 iPhone 用户（iOS 16.4 之前）和部分 iPad 用户（Safari 16.3 及更早）根本看不到效果：旧版 Safari 完全忽略该函数，连 @supports 都检测不到，直接跳过整条声明。Chrome for iOS 因底层限制，实际用的是 Safari 渲染引擎，同样不支持。你写的 color-mix(in srgb, #2563eb 70%, #ffffff 30%) 在这些设备上等于没写。
- 检查当前 Safari 版本：设置 → 通用 → 关于本机 → 软件版本；iOS 17.4+ 对应 Safari 17.4 才有较完整支持
- 别信 DevTools 的模拟器：iOS 真机实测才是唯一标准
- 若 fallback 没写在前一行，用户看到的可能是透明、继承色或父元素背景色，而非预期色阶
color-mix() 在移动端必须满足的三要素
漏掉任意一项，整条 CSS 声明静默失效，控制台无报错，DevTools 显示“无效值”。
- 色彩空间必须显式小写：
in srgb（in SRGB、in rgb、in lch在 Safari 16.4+ 才部分可用，但 iOS 17.0–17.3 仍不稳定） - 颜色必须是字面量：
var(--primary)或currentcolor会直接报Invalid property value，只能写#2563eb、hsl(210 70% 60%)这类解析后确定的值 - 每个颜色后必须带权重：
red 60%或blue 0.4，写成red, blue或red 60, blue 40（缺 %）均被忽略
移动端真能用的 fallback 写法不是靠 @supports
@supports (background: color-mix(in srgb, red, blue)) 在 Safari 16.3 及更早版本里根本不会进入花括号内——它连语法都不识别，更别说执行检测。真正起作用的，只有 CSS 层叠本身。
- 永远把静态色写在前面：
background-color: #2563eb; background-color: color-mix(in srgb, #2563eb 70%, #ffffff 30%); - 不要塞进复合属性：
background: color-mix(...) no-repeat;会导致整个background声明失效，必须拆成--mixed-bg: color-mix(...); background-color: var(--mixed-bg); - 关键语义色（如错误态
#ef4444、成功态#22c55e）绝不能只依赖color-mix()，它不是渲染保障
所谓“主题色阶变换”，移动端实际能做的只有预设
color-mix() 不支持变量、不监听 prefers-color-scheme 变化、hover 时也不会重新计算。你无法用它实现“深色模式下自动加深主色 20%”这种逻辑。
- 纯 CSS 方案只能靠媒体查询硬编码比例：
@media (prefers-color-scheme: dark) { .btn { background-color: #1e40af; background-color: color-mix(in srgb, #1e40af 80%, #0c1424 20%); } } - 想让不同屏幕尺寸用不同混合比例？得提前写好
@media (max-width: 480px)、@media (min-width: 768px)多套规则 - 如果需要真正响应式色阶（比如根据用户滑动实时调整），必须用 JS 读取变量、拼接字符串、注入 style 标签或修改
style属性
最常被忽略的一点：你在 CSS 里写的每一个 color-mix()，都必须是「已知颜色字面量 + 显式权重 + 小写 in srgb」三者齐全。它产出的不是一个活的调色盘，而是一个死的十六进制值——和手写 #81aef5 没区别，transition 对它完全无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
