通过结合CSS color属性与@media查询，可实现响应式颜色适配：首先根据屏幕宽度调整文本颜色以优化可读性，例如小屏用深灰（#333）、大屏用稍浅色（#444）；其次利用prefers-color-scheme检测系统主题，自动切换亮/暗模式下的文字颜色（如深色模式用#eee），提升夜间浏览体验；再通过prefers-contrast: high为高对比度需求用户增强关键信息的色彩鲜明度；最后借助prefers-reduced-data在低数据或节能模式下降低颜色饱和度（如设为#555），兼顾性能与可视性。这些技术让颜色不仅美观，更智能适应设备环境，提升可访问性与用户体验一致性。
在响应式网页设计中，CSS 颜色不仅仅是视觉美化的一部分，还能根据设备特性动态调整，提升用户体验。通过将 color 属性 与 @media query 结合使用，可以让网站在不同屏幕尺寸或环境条件下呈现更合适的色彩方案。
根据屏幕宽度调整文本颜色
不同设备的显示环境差异较大，比如移动设备常在强光下使用，而桌面显示器通常在室内。因此，可以根据视口宽度优化文字颜色，确保可读性。
例如，在小屏幕上使用更深的文字颜色以增强对比度：
@media (max-width: 768px) {
body {
color: #333; /* 深灰色，适合小屏阅读 */
}
}
<p>@media (min-width: 769px) {
body {
color: #444; /<em> 稍浅，适合大屏长时间浏览 </em>/
}
}</p>适配暗色模式（prefers-color-scheme）
现代浏览器支持检测用户系统的外观偏好，如浅色或深色主题。利用 prefers-color-scheme 媒体特性，可以自动切换配色方案。
立即学习“前端免费学习笔记（深入）”；
结合 color 属性，实现夜间友好的文字颜色：
@media (prefers-color-scheme: light) {
.text {
color: #222;
}
}
<p>@media (prefers-color-scheme: dark) {
.text {
color: #eee; /<em> 浅色文字用于深背景 </em>/
}
}</p>这样无需额外按钮，页面就能自动匹配系统设置，减少眼睛疲劳。
针对高对比度环境优化颜色
为提高可访问性，可以检测用户是否启用了高对比度模式，并相应地调整颜色。
虽然目前支持有限，但部分浏览器识别 forced-colors 特性：
@media (prefers-contrast: high) {
.highlight {
color: #ff0000; /* 使用更鲜明的颜色 */
}
}
这类设置对视力障碍用户尤其重要，确保关键信息清晰可见。
结合设备亮度调整颜色（prefers-reduced-data）
虽然不能直接获取环境光强度，但可通过用户设置间接判断。例如，在低数据模式或节能模式下，适当降低颜色饱和度以节省电量。
实际应用中更多是配合背景图简化，但文字颜色也可随之微调：
@media (prefers-reduced-data: reduce) {
p {
color: #555;
}
}
基本上就这些。将 color 与 media query 联动，不只是让页面“好看”，更是让颜色“聪明”。合理使用这些技术，能让网页在各种环境下都保持良好的可读性和体验一致性。不复杂，但容易忽略细节。
