为什么要为像素烦恼？一个人有一个非常大的显示器，像素很少，另一个人有一个中等密度的显示器，比如说 1080p 24 英寸，还有一个人使用 1440p 手机显示器。

使用像素大小的媒体查询有什么意义？？？如何查询以厘米为单位的实际显示尺寸，这会成倍地更有用？

我想要它的用途:实际上可靠地确定是使用移动还是桌面风格。

没有JS，太慢了。

最佳答案

视口(viewport)和分辨率之间的差异

像素和每英寸像素

移动设备和其他类似设备的屏幕都包含在像素(颜色的各个点)上，并且当所有像素显示感觉像图像时一起显示。水平轴上的像素数和垂直轴上的像素数称为分辨率。图像/文本或屏幕上显示的任何内容的清晰度取决于分辨率和屏幕尺寸。相同的像素分辨率在较小的屏幕上会显示得更清晰，而在大屏幕上会逐渐失去清晰度，因为相同数量的像素分布在很大的 n 英寸上。

通常屏幕的物理尺寸以英寸计算，分辨率取决于屏幕的物理尺寸，因此确定屏幕的分辨率单位称为每英寸像素数。

每英寸增加的像素数会提高显示质量和比例。这里有一个问题:一英寸有多少像素，这样我们就可以计算出屏幕的分辨率？好吧，没有具体的答案，因为我们无法为所有屏幕设置某个单一值，它也因屏幕尺寸而异。通常它位于每英寸 72 - 162 像素之间，并且随着屏幕变小，它的值会增加。

视口(viewport)

设备的用户可见区域称为屏幕的实际视口(viewport)大小。

视口(viewport)屏幕尺寸

视口(viewport)屏幕尺寸是任何屏幕的实际分辨率，它仅取决于每英寸的像素单位。视口(viewport)在屏幕尺寸方面始终保持不变，因为屏幕尺寸保持不变但显示它的分辨率是可变的，例如旧的 15"显示器可以显示 800 x 600、1024 x 768 和 1280 x 1023 的不同分辨率，因此它取决于对焦能力一个屏幕。

请注意，随着分辨率从其原始或最大显示分辨率变小，您会得到模糊的结果，因为相同数量的像素现在分布在大视口(viewport)尺寸上。

CSS 像素比例

一英寸可以包含大约 72 - 162 个像素。让我们将移动设备的每英寸 132 像素视为每个设备的一个单位。一个单位像素等于 1 个 CSS 像素比。因此，如果单位像素增加，CSS 像素比率将增加。例如一个设备有 296 PPI 那么它的像素比可以是 2(之后点可以忽略)。

分辨率、视口(viewport)和 CSS 像素比

分辨率取决于 CSS 像素比。如果像素比增加的话，设备的分辨率可以提高，但是要记住视口(viewport)的大小，也就是屏幕实际可见的大小是不会变的。屏幕的最大分辨率实际上是 CSS 像素比的倍数。

示例

苹果手机 7 视口(viewport)尺寸:375 x 667 像素 分辨率:750 x 1334 像素 像素密度:~326 ppi CSS 像素比:2

https://stackoverflow.com/questions/65186859/