利用CSS Media Queries可根据设备特性调整颜色；2. prefers-color-scheme实现深浅色主题自动切换；3. prefers-contrast适配不同光照环境的对比度需求；4. print媒体查询优化打印时的颜色与内容呈现；5. color-gamut为宽色域设备提供更鲜艳色彩；6. 合理适配可提升可读性与用户体验。
在不同设备或屏幕条件下调整颜色，可以让网页在各种环境下都保持良好的可读性和视觉体验。CSS 的 Media Queries 提供了根据设备特性（如屏幕宽度、亮度、色彩模式等）动态调整样式的能力，包括颜色设置。
根据设备光线环境调整颜色：prefers-color-scheme
现代浏览器支持通过 prefers-color-scheme 检测用户系统的明暗偏好，实现深色/浅色主题自动切换。
/* 默认使用浅色 */
body {
background-color: white;
color: black;
}
/ 当系统为深色模式时切换为深色主题 /
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #e0e0e0;
}
}
这样用户无需手动切换主题，页面就能适配其系统设置，提升阅读舒适度。
根据环境光亮度调整颜色：prefers-contrast 与 prefers-reduced-data
部分用户可能处于强光或弱光环境，可通过 prefers-contrast 判断是否需要高对比度颜色。
立即学习“前端免费学习笔记（深入）”；
/* 提供更高对比度的文本颜色 */
@media (prefers-contrast: high) {
body {
color: black;
background-color: white;
}
a {
color: #c00;
}
}
/ 低对比度环境（较少使用） /
@media (prefers-contrast: low) {
body {
color: gray;
}
}
这有助于视力障碍用户在不同光照下更清晰地识别内容。
针对打印场景优化颜色
屏幕显示和打印输出对颜色的需求不同。打印时应避免大面积深色背景，节省墨水并提高可读性。
@media print {
body {
background-color: white;
color: black;
}
.no-print {
display: none;
}
a::after {
content: " (" attr(href) ")"; /* 打印链接地址 */
font-size: 0.8em;
color: #555;
}
}
确保关键信息在黑白打印中依然清晰可辨。
响应设备色彩能力：color-gamut
某些高端设备支持更广的色彩范围（如 P3）。可以为这些设备提供更鲜艳的颜色。
/* 普通 sRGB 颜色 */
.hero {
background-color: #0066cc;
}
/ 在支持宽色域的设备上使用更鲜艳的颜色 /
@media (color-gamut: p3) {
.hero {
background-color: color(display-p3 0 0.5 0.8);
}
}
注意：使用 color() 函数时需考虑浏览器兼容性，可配合降级方案使用。
基本上就这些。合理利用 Media Queries 调整颜色，能显著提升用户体验，让设计更具包容性。关键是理解用户所处的环境，并做出相应的视觉适配。不复杂但容易忽略。
