在响应式网页开发过程中，不同尺寸、不同显示特性的屏幕设备对颜色的呈现效果存在差异，将CSS颜色表示方法和媒体查询结合使用，能够有效实现不同屏幕下的颜色适配，提升多端页面的视觉体验。
常见CSS颜色表示方法
CSS提供了多种颜色表示方式，不同方式适用于不同的开发场景，开发者可以根据需求灵活选择。
十六进制表示法
十六进制表示法是最常用的颜色表示方式之一，格式为#RRGGBB，其中RR、GG、BB分别代表红、绿、蓝三个通道的十六进制值，取值范围为00到FF。例如#ff0000表示红色，#ffffff表示白色。如果需要设置透明度，还可以使用8位十六进制格式#RRGGBBAA，最后两位AA表示透明度，00为完全透明，FF为完全不透明。
RGB与RGBA表示法
RGB表示法通过rgb(红,绿,蓝)的格式定义颜色，三个参数取值为0到255的整数。RGBA在RGB的基础上增加了透明度参数，格式为rgba(红,绿,蓝,透明度)，透明度取值为0到1的浮点数，0为完全透明，1为完全不透明。
/* 十六进制颜色示例 */
.header {
background-color: #2c3e50;
}
/* RGB颜色示例 */
.btn-primary {
color: rgb(255, 255, 255);
}
/* RGBA颜色示例，设置半透明背景 */
.card-mask {
background-color: rgba(0, 0, 0, 0.5);
}
HSL与HSLA表示法
HSL表示法基于色相、饱和度、亮度三个维度定义颜色，格式为hsl(色相,饱和度,亮度)。色相取值为0到360的角度值，对应色轮上的颜色；饱和度取值为0%到100%的百分比，0%为灰色，100%为最鲜艳；亮度取值为0%到100%的百分比，0%为黑色，100%为白色。HSLA同样增加了透明度参数，格式为hsla(色相,饱和度,亮度,透明度)。
媒体查询基础语法
媒体查询是CSS3提供的功能，允许开发者根据设备的特性（如屏幕尺寸、分辨率、方向等）应用不同的样式规则。基本语法如下：
@media 媒体类型 and (媒体特性) {
/* 符合媒体查询条件时应用的样式 */
}
常用的媒体类型包括screen（屏幕设备）、print（打印设备）等，最常用的媒体特性是max-width（最大宽度）和min-width（最小宽度），用来设置响应式断点。常见的断点设置如下：
- 小屏手机：max-width: 576px
- 平板设备：min-width: 577px and max-width: 992px
- 桌面设备：min-width: 993px
颜色表示与媒体查询结合实践
在实际开发中，我们可以根据屏幕尺寸调整颜色方案，解决不同屏幕下的视觉问题。以下是几个常见的实践场景。
小屏设备提升颜色对比度
小屏设备的显示面积有限，部分浅色文字在浅色背景上可能对比度不足，影响可读性。可以通过媒体查询为小屏设备设置更高对比度的颜色。
/* 默认桌面端样式，浅色文字搭配浅灰背景 */
.article-text {
color: #666666;
background-color: #f5f5f5;
}
/* 小屏设备适配，加深文字颜色提升对比度 */
@media screen and (max-width: 576px) {
.article-text {
color: #333333;
background-color: #ffffff;
}
}
暗色模式适配
现在很多设备支持暗色模式，我们可以结合prefers-color-scheme媒体特性，配合HSL颜色表示法快速切换亮色和暗色方案。HSL的亮度参数调整起来更直观，只需要修改亮度值即可实现明暗切换。
/* 默认亮色模式，低饱和度、高亮度 */
.page-container {
background-color: hsl(0, 0%, 98%);
color: hsl(0, 0%, 20%);
}
/* 暗色模式适配，降低亮度，调整文字颜色 */
@media (prefers-color-scheme: dark) {
.page-container {
background-color: hsl(0, 0%, 10%);
color: hsl(0, 0%, 85%);
}
}
不同尺寸屏幕的颜色饱和度调整
大屏设备的显示效果更鲜艳，可以适当提高颜色饱和度增强视觉吸引力；小屏设备则可以适当降低饱和度，避免颜色过于刺眼。
/* 默认中等饱和度 */
.highlight-box {
background-color: hsl(200, 50%, 60%);
}
/* 大屏设备提高饱和度 */
@media screen and (min-width: 993px) {
.highlight-box {
background-color: hsl(200, 70%, 60%);
}
}
/* 小屏设备降低饱和度 */
@media screen and (max-width: 576px) {
.highlight-box {
background-color: hsl(200, 30%, 60%);
}
}
注意事项
在使用颜色表示和媒体查询结合开发时，需要注意以下几点：
- 优先使用相对单位或HSL等易调整的颜色表示方式，减少后续适配的修改成本
- 媒体查询的断点设置要符合目标用户的设备分布，不要盲目套用通用断点
- 颜色适配要兼顾可访问性，确保文字与背景的颜色对比度符合WCAG标准
- 避免设置过多的媒体查询规则，防止样式文件过于冗余，影响加载性能