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 在这一领域向前迈出了一大步。