什么是物理像素和逻辑像素？

在前端开发中，物理像素和逻辑像素是两个重要的概念，它们共同影响着如何在屏幕上显示内容。它们的区别在于：

物理像素 (Physical Pixel): 指的是显示器上可以实际控制发光的最小单位。一个物理像素就是一个屏幕上的一个物理光点。物理像素的数量是由屏幕硬件决定的，是固定的，不可改变的。例如，一个分辨率为 1920x1080 的显示器，水平方向有 1920 个物理像素，垂直方向有 1080 个物理像素。
逻辑像素 (Logical Pixel, 也称为设备独立像素 DIP 或 CSS 像素): 是浏览器使用的抽象单位，用于表示网页内容的大小和位置。逻辑像素的大小并不是固定的，它会根据设备的像素密度 (PPI - Pixels Per Inch) 和缩放比例进行调整，以保证在不同设备上显示一致的视觉效果。

它们之间的关系：

逻辑像素和物理像素的关系由设备像素比 (Device Pixel Ratio, DPR 或 dpr) 决定。

例如，在一个 DPR 为 2 的设备上，一个逻辑像素对应着 2x2 个物理像素。这意味着，一个 100x100 逻辑像素的图片，在这个设备上实际会占据 200x200 物理像素的空间。

为什么要区分物理像素和逻辑像素？

在高分辨率屏幕 (例如 Retina 屏幕) 出现之前，逻辑像素和物理像素通常是 1:1 的关系。但是，随着高分辨率屏幕的普及，如果仍然使用物理像素作为网页布局的单位，会导致网页在高分辨率屏幕上显示得非常小。为了解决这个问题，引入了逻辑像素的概念。

通过使用逻辑像素，开发者可以不必关心设备的实际分辨率，只需要按照逻辑像素进行布局。浏览器会根据设备的 DPR 自动将逻辑像素转换为对应的物理像素，从而保证网页在不同设备上显示一致的视觉效果。

在前端开发中的应用：

CSS: 在 CSS 中，我们通常使用逻辑像素作为单位，例如 px。
JavaScript: 在 JavaScript 中，我们可以通过 window.devicePixelRatio 获取设备的 DPR。
图片: 为了保证在高分辨率屏幕上显示清晰的图片，我们需要提供不同分辨率的图片，例如 2x 图和 3x 图，并使用媒体查询或 <picture> 元素来根据 DPR 选择合适的图片。

总而言之，理解物理像素和逻辑像素的区别对于前端开发者至关重要，它可以帮助我们更好地控制网页在不同设备上的显示效果，并提供更好的用户体验。