CSS 媒体查询在高分辨率设备下的匹配规则
大家好！今天我们来深入探讨 CSS 媒体查询在高分辨率设备下的匹配规则。随着移动设备屏幕分辨率的不断提高，理解媒体查询如何处理像素密度（DPI/PPI）以及逻辑像素与物理像素之间的关系变得至关重要。我们将从基础概念入手，然后逐步深入到代码示例和实际应用，帮助大家更好地掌握这一技术。
一、基础概念：像素、DPI、PPI、设备像素比（DPR）
在深入媒体查询之前，我们需要先理解几个关键概念：
- 像素（Pixel）： 图像显示的基本单位，是构成屏幕图像的最小元素。
- DPI（Dots Per Inch）： 每英寸的点数，通常用于描述打印机的分辨率。
- PPI（Pixels Per Inch）： 每英寸的像素数，用于描述屏幕的分辨率。虽然 DPI 主要用于打印，PPI 主要用于屏幕，但在实际使用中，这两个术语经常互换使用。
- 设备像素比（Device Pixel Ratio – DPR）： 设备像素比是物理像素与逻辑像素的比率。它告诉浏览器，一个 CSS 像素应该由多少个物理像素来绘制。在高分辨率屏幕上，DPR 通常大于 1。
理解这些概念对于我们正确使用媒体查询至关重要。例如，一个设备的 DPR 为 2，意味着一个 CSS 像素需要用 2×2 = 4 个物理像素来绘制，从而实现更清晰的显示效果。
二、媒体查询中的分辨率单位：px、dpi、dpcm、dppx
CSS 媒体查询提供了多种用于描述分辨率的单位：
-
px(CSS pixels): 这是最常用的单位，代表CSS像素。CSS像素是一个抽象单位，它的大小与设备的物理像素大小无关。 -
dpi(dots per inch): 用于指定每英寸的点数。 -
dpcm(dots per centimeter): 用于指定每厘米的点数。 -
dppx(dots per pixel unit): 用于指定每个像素单位的点数。1dppx等于96dpi。
通常，我们会使用 dppx 来处理高分辨率设备的媒体查询，因为它直接与设备像素比相关。
三、基于设备像素比（DPR）的媒体查询
在高分辨率设备上，使用基于 DPR 的媒体查询是最佳实践。CSS 提供了 resolution 媒体特性，我们可以使用 dppx 单位来指定 DPR 的值。
以下是一些示例：
/* 针对标准分辨率设备 (DPR = 1) */
@media (resolution: 1dppx) {
/* CSS 规则 */
body {
font-size: 16px;
}
}
/* 针对 Retina 屏幕 (DPR = 2) */
@media (resolution: 2dppx) {
/* CSS 规则 */
body {
font-size: 18px; /* 适当增大字体大小 */
}
}
/* 针对超高分辨率屏幕 (DPR = 3 及以上) */
@media (resolution: 3dppx) {
/* CSS 规则 */
body {
font-size: 20px; /* 进一步增大字体大小 */
}
}
/* 使用范围查询 */
@media (min-resolution: 2dppx) and (max-resoluti