请解释下dpr和dpi

在前端开发中，DPR（Device Pixel Ratio，设备像素比）和 DPI（Dots Per Inch，每英寸像素点数）经常被混淆，但它们是不同的概念，尽管它们之间存在联系。

DPI (Dots Per Inch):

• 指的是物理屏幕上每英寸可以显示的像素点数量。这是一个物理属性，由屏幕硬件决定，一旦屏幕生产出来就固定不变。
• DPI 值越高，屏幕在相同物理尺寸下可以显示更多的像素，图像也就越清晰细腻。
• 例如，一台 27 英寸的显示器，分辨率为 2560x1440，它的 DPI 大约为 109。

DPR (Device Pixel Ratio):

• 指的是一个 CSS 像素对应多少个物理像素。这是一个比例值，表示逻辑像素与物理像素之间的映射关系。
• DPR 的出现是为了解决高分辨率屏幕（例如 Retina 屏幕）上网页显示模糊的问题。在高分辨率屏幕上，如果仍然按照 1:1 的比例渲染网页，那么图像和文字就会显得模糊，因为物理像素密度更高了。为了解决这个问题，浏览器引入了 DPR 的概念，通过缩放网页元素来适应高分辨率屏幕。
• 例如，一个 DPR 为 2 的设备意味着一个 CSS 像素对应两个物理像素。这意味着浏览器会将网页放大两倍渲染，以匹配更高的像素密度。
• 常见的 DPR 值有 1、1.5、2、3 等。

两者的关系:

DPR 和 DPI 之间存在间接关系，但它们并非直接相等。DPR 是由操作系统根据屏幕的 DPI 和尺寸计算得出的。操作系统会根据 DPI 值来判断屏幕是否为高分辨率屏幕，并据此设置合适的 DPR 值，以保证网页内容的清晰度。

在前端开发中的应用:

• 图片适配: 为了避免在高 DPR 屏幕上图片模糊，需要提供多倍图。例如，对于一张 100x100 px 的图片，需要提供 200x200 px (@2x) 和 300x300 px (@3x) 的版本，供不同 DPR 的设备使用。可以使用 <picture> 元素和 srcset 属性来实现。
• 媒体查询: 可以使用媒体查询 -webkit-min-device-pixel-ratio 或 min-resolution 来针对不同 DPR 的设备应用不同的样式。
• JavaScript 获取 DPR: 可以使用 window.devicePixelRatio 获取当前设备的 DPR 值。

总结:

DPI 是屏幕的物理属性，DPR 是浏览器为了适配高分辨率屏幕而引入的一个比例值。前端开发者需要理解 DPR 的概念，并使用合适的技术来适配不同 DPR 的设备，以确保网页在各种设备上都能清晰地显示。