CSS媒体查询可直接控制颜色，推荐优先使用prefers-color-scheme，结合自定义属性统一管理，避免硬编码和冗余选择器，同时兼顾辅助功能查询。
媒体查询里直接改 color 或 background-color 就行
不需要额外工具或 JS，CSS 媒体查询本身就能控制颜色值。只要在对应断点内重写目标选择器的颜色属性，浏览器会自动按视口匹配生效。
- 优先级和普通 CSS 一样：后写的规则覆盖前面的，加
!important要谨慎（容易后续难维护） - 推荐用
min-width而非max-width，避免“移动优先”时漏掉大屏样式 - 颜色值支持所有合法格式：
#fff、rgb(255, 255, 255)、hsl(0, 0%, 100%)、甚至var(--primary)（如果变量已定义）
@media (min-width: 768px) {
.header-title {
color: #2c3e50;
}
.btn-primary {
background-color: #3498db;
}
}
@media (prefers-color-scheme: dark) {
.text-body {
color: #e0e0e0;
}
}
prefers-color-scheme 比屏幕尺寸更值得优先考虑
用户系统级深色/浅色偏好，比单纯看屏幕宽高更能反映真实阅读意图。现代项目应把它当作第一层颜色适配逻辑。
- 它和
min-width可以叠加使用，比如：深色模式下，桌面端用更深的背景，移动端用稍亮的灰 - 注意：Safari 旧版本需加
-webkit-前缀，但 iOS 13.4+ 和 macOS 10.15.4+ 已原生支持 - 不要只改文字色——边框、阴影、SVG fill/stroke 等也得同步调整，否则视觉割裂
用 CSS 自定义属性（var()）统一管理响应式颜色
硬编码多处颜色值会导致改一个色要搜全项目，容易漏。把颜色抽成变量，在媒体查询里只改变量值，更安全可控。
- 变量必须在 :root 或对应作用域内声明，媒体查询中修改的是该作用域下的变量值
- 不能在媒体查询里「定义」新变量，只能「重新赋值」已声明的变量
- 变量名建议带语义，比如
--text-primary，别用--color-1这类无意义命名
:root {
--text-primary: #333;
--bg-surface: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #e0e0e0;
--bg-surface: #121212;
}
}
.card {
color: var(--text-primary);
background-color: var(--bg-surface);
}
避免在媒体查询里写太多重复选择器
一个组件在多个断点下颜色不同，不意味着每个断点都要完整重写整个选择器块。结构混乱会让维护成本陡增。
立即学习“前端免费学习笔记（深入）”；
- 把共用样式（如字体、padding）抽到外层，媒体查询只管「变的部分」
- 慎用嵌套媒体查询（如 Sass 中的 @media 嵌套），编译后可能生成冗余 CSS，影响可读性
- 如果颜色变化逻辑复杂（比如根据亮度自动反色），CSS 无力处理，该上 JS 的时候别硬扛
prefers-reduced-motion 和 prefers-contrast 这类辅助功能媒体查询——它们虽不直接控制颜色，但会影响颜色对比度要求，尤其在医疗、教育类网站中，跳过这步可能让部分用户根本看不清文字。 
