HTML5媒体查询可通过and组合resolution与color/color-index判断屏幕分辨率和颜色深度：resolution用于像素密度（推荐dppx单位），color表示每通道位数（如min-color:8为24位真彩色），color-index表示调色板颜色总数（0为单色），二者互斥且需按设备类型选用。
在 HTML5 媒体查询中，可以同时判断屏幕分辨率与颜色深度，关键在于组合多个媒体特性，并用 and 连接。注意：分辨率用 resolution，颜色深度用 color 或 color-index，二者不能混用——color 表示每个颜色通道的位数（如 8 位 RGB 各通道），color-index 表示设备调色板支持的颜色总数。
用 resolution + color 判断高分屏且真彩色设备
适合需要高清显示+丰富色彩的场景（如图像编辑工具、设计类 H5）：
-
@media screen and (min-resolution: 192dpi) and (min-color: 8) { ... }表示：设备是屏幕类型，且每英寸像素 ≥192，同时每个颜色通道至少支持 8 位（即 24 位真彩色） -
@media screen and (min-resolution: 2dppx) and (color)使用dppx（dots per pixel unit）更适配高 DPR 设备；color单独出现表示“支持彩色”，等价于min-color: 1
用 resolution + color-index 匹配有限调色板设备
适用于嵌入式终端、老旧设备或特殊工业屏（如带色表的 LCD）：
-
@media screen and (max-resolution: 96dpi) and (max-color-index: 256) { ... }匹配低分辨率 + 颜色索引 ≤256 的设备，可加载简化版 UI 或禁用渐变 -
color-index值为非负整数，0 表示单色设备（如黑白电子墨水屏），常见值有 16、256、65536
注意事项和常见误区
实际使用时需避开几个典型问题：
- 不要用
screen.width或screen.height替代媒体查询——它们返回物理像素，不响应缩放和视口变化，也不触发 CSS 重排 -
resolution单位支持dpi（点/英寸）、dpcm（点/厘米）、dppx（点/CSS 像素），推荐优先用dppx，它自动适配设备像素比 -
color和color-index互斥：真彩色设备（如手机、Mac）通常color有效但color-index为 0 或未定义；调色板设备才适用后者 - 部分浏览器（尤其旧版 Android WebView）对
resolution支持不完整，建议搭配matchMedia()做 JavaScript 回退检测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
