什么是 Android 设备独立像素，它与常规 CSS 像素有何不同？

Question

我正在学习响应式设计的概念，但我对像素感到困惑。我知道这样的问题在这里很常见，但仍然没有找到（我可以理解的）答案。

如果我错了，请纠正我：

有一个官方定义的CSS pixel。这是我们在 CSS 中编码时使用的像素：宽度、高度、边框等。每个设备（平板电脑、手机...）都将其转换为 设备像素。设备像素在每个设备中都是唯一的（我猜这取决于设备屏幕的物理属性），它与 CSS 像素之间的关系是 DPR（设备像素比）。

然后是Device Independent Pixel。为 Android 手机创建的概念，作为 CSS 像素和设备像素之间的抽象层。

所以，这些天我读了很多书，但仍然不确定作为一名想要创建响应式网站的开发人员，什么对我来说应该是重要的。看起来设备像素并不是很重要（它们与 CSS 像素之间的比率由设备处理）。但不太确定。

任何人都可以在这里发光吗？

Answer 1

作为开发人员，您阅读的所有信息对您来说都很重要。我在设计我的第一个响应式设计时偶然发现了相同的概念，并认为最新的 iphone 是一款分辨率宽度约为 1980 或可能为 1080 像素的全高清手机，我在媒体查询中使用max-width: 768px。

正如您所提到的，官方的 css 像素等于 1/96 英寸，换句话说，任何媒体设备的 1 英寸都有 96 个 css 像素。当您编写媒体查询时，您指的是这些 CSS 像素。因此，如果 iPhone 的宽度约为 3-4 英寸，那么它的宽度为 300 到 400 css 像素。现在您可能会认为，由于只有 css 像素对网页设计很重要，您不应该关心 dp 、dpi、 ppi 或 dip 之类的东西。但是您也必须了解它们，因为在设计ratina 显示器时您将需要它们。

css 像素也称为逻辑像素。另一种像素是物理像素。实际上，根据定义，像素是屏幕上最小的可着色部分。这个最小的可着色部分称为物理像素。当我们设置border: 1px solid red 时，这将在屏幕上用红色填充 1 个逻辑像素（1/96 英寸）宽度。现在这个逻辑像素可能有很多物理像素。如果一个屏幕在一个逻辑像素中提供 4 个物理像素，那么我们可以区分0.25 solid red 和0.5 solid red——即屏幕可以提供更精细的视觉细节。

现在为什么需要关心物理像素？如今的屏幕具有非常高的分辨率，即一个逻辑像素中有更多的物理像素。例如。 mac book 在大约 13 英寸的屏幕上具有大约 2560 x 1600 的分辨率，而具有 96dpi 的普通电脑在 19 英寸中具有 1367 x 768 个物理像素。现在，如果您在我的普通 19 英寸电脑上将宽度为 1367 css 像素和高度为 768 css 像素的图像渲染为<img src="bla.jpg" width="680" height="380">，那么图像将缩小到其实际大小的一半。每一对像素将在我的屏幕上合并为一个，也就是说，我在图像中每隔 1px 就丢失了 1px 的细节。另一方面，如果我渲染一个宽度为 680 css 像素和高度为 380 css px 的图像，那么这两个图像将看起来完全相同。事实上，我的屏幕仅提供 1/96 英寸宽的微小细节。另一方面，如果我有 mac book，那么 1367 css px 宽的图像对我来说会更清晰，因为 mac book 会将图像压缩到一半，但不会将 2pixels 合并为一个，因为它也可以提供 0.5 个逻辑像素的细节它可以在 1/96 英寸内显示两种不同的颜色吗？好的，但是我如何将这个事实用于网页设计？我们可以做的是为ratina显示器提供更高分辨率的图像，为普通显示器提供分辨率更低的图像。为此，我们使用以下内容：

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

device-pixel-ratio 是显示器上一个逻辑像素中可用的物理像素数。 dpi 的意思是一样的。实际上dpi是指一英寸显示器的物理像素。