html - 物理像素 vs CSS 像素 vs 设备独立像素 vs 密度独立像素 vs PPI

Question

我正在学习网络开发，但我很难确定在所有这些方面什么是等价的。

我知道硬件像素和物理像素是最小的单位，与密度无关的像素通过设备像素比映射到实际的硬件像素，它们用于使观看体验更加一致。这是否意味着我看到的与设备无关的像素是同一回事？

此外，我读到浏览器以 CSS 像素报告视口(viewport)宽度，这些和 DIP 是一回事吗？

我知道 Pixels per inch 是字面意思，它们是一英寸的像素数，但它们与 DIP 有什么关系？完全独立的测量？我应该什么时候使用它？

我希望这是一个合适的问题，我在将所有这些概念链接到一个可用的 map 时遇到了问题，并且没有发现任何其他问题可以同时解决所有这些问题。

Answer 1

I know hardware pixels and physical pixels are the smallest unit, and that density independent pixels map to actual hardware pixels via a device pixel ratio and they are used to make the viewing experience more consistent. Does this mean that the device independent pixels I'm seeing are the same thing?

Further, I read that the browser reports viewport width in CSS pixels, are these and DIPs the same thing?

在这两个方面都是肯定的。例如，一个 height: 200px 的元素； width: 200px 始终 200 x 200 的 DIP 或 CSS 像素，即使硬件配置为以比平常更高或更低的分辨率显示。在 200% 的比例因子下，如果 1x1 DIP 或 CSS 像素以 100% 的比例映射到 1x1 物理像素，它将映射到 2x2 物理像素正方形。

I know that Pixels per inch are literal, they are the number of pixels in an inch, but how do they relate to DIPs? A totally separate measurement?

CSS 不使用 PPI；它只使用 DPI。 Section 6.4 of css-values-3列出以下单位:

dpi
Dots per inch.

dpcm
Dots per centimeter.

dppx
Dots per px unit.

The <resolution> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px.

为了 CSS 和 Media Queries 的目的，单个“点”始终对应于单个物理像素，而不是 DIP 或 CSS 像素，因此是 dppx 单位。例如，200% 的比例因子或 2.0 的设备像素比(非标准)相当于 2 dppx。