html - CSS 分辨率计算

Question

我目前正在做一个响应式项目。我已经整理好布局，现在我正在实现媒体查询。我理解宽度、设备宽度、设备像素比率的概念，以及物理像素和 CSS 像素之间的区别。

但是，分辨率媒体查询让我感到困惑。我发现许多非视网膜显示器的 CSS 分辨率为 96ppi 或 96dpi，而视网膜显示器的分辨率为 192ppi 或 192dpi。

这个值是怎么计算出来的？有没有什么公式之类的？

Answer 1

你有点把事情复杂化了。

使用 css，您可以使用 css 像素。然后，设备本身会根据它们的分辨率决定如何处理你的 css 像素。对于响应式构建，您可以专门使用 css 像素，并允许设备决定如何将这些 css 像素转换为实际像素

例如，如果您使用媒体查询：

@media screen and (min-width: 480px)

您会遇到任何报告其宽度为 480 css 像素（或更大）宽的设备。物理像素的实际数量无关紧要不是css作者的问题。

然而，情况并非如此的一个领域是图像。您可能希望为视网膜设备提供两倍质量的图像，因为这些额外的像素将对图像清晰度有用，在这种情况下，dpi 媒体查询将很有用。（注意：请记住，许多移动用户宁愿快速加载页面，也不愿拥有四倍大小的超高质量图像）。

@media screen and (min-resolution: 192dpi) {
    /* load that high definition image here */
}

设备像素和 dpi 之间的比率是像素大小的函数，因此这是在逐个设备的基础上设置的，通常取决于制造商可以将其像素制作成多小来宣传最高分辨率的显示器。Retina 在这一领域向前迈出了一大步。