CSS 分辨率计算
CSS resolution calculations
我目前正在做一个响应式项目。我已经整理好布局，现在我正在实施媒体查询。我了解宽度、设备宽度、设备像素比的概念，以及物理像素和 CSS 像素之间的区别。
但是，分辨率媒体查询让我感到困惑。我发现许多非 Retina 显示器的 CSS 分辨率为 96ppi 或 96dpi，而 Retina 显示器的分辨率为 192ppi 或 192dpi。
这个值到底是怎么计算出来的？有公式之类的吗？
你有点把事情复杂化了。
使用 css，您使用 css 像素。然后，设备本身会根据其分辨率决定如何处理您的 css 像素。对于响应式构建，您可以专门使用 css 像素并允许设备决定如何将这些 css 像素转换为实际的
例如，如果您使用媒体查询：
@media screen and (min-width: 480px)
您会点击任何报告其宽度为 480 css 像素（或更大）的设备。实际物理像素数无关紧要不是css作者的问题
然而，图像不是这种情况的一个领域。您可能希望提供两倍于 Retina 设备质量的图像，因为这些额外的像素对于图像清晰度很有用，在这种情况下，dpi 媒体查询会很有用。 （注意：请记住，许多移动用户宁愿快速加载页面，也不愿拥有四倍大小的超高质量图像）。
@media screen and (min-resolution: 192dpi) {
/* load that high definition image here */
}
设备像素和 dpi 之间的比率是像素大小的函数，因此这是根据设备逐个设置的，通常取决于制造商可以将其像素制作成多小以宣传最高分辨率显示. Retina 在这个领域向前迈出了一大步。
我目前正在做一个响应式项目。我已经整理好布局，现在我正在实施媒体查询。我了解宽度、设备宽度、设备像素比的概念，以及物理像素和 CSS 像素之间的区别。
但是，分辨率媒体查询让我感到困惑。我发现许多非 Retina 显示器的 CSS 分辨率为 96ppi 或 96dpi，而 Retina 显示器的分辨率为 192ppi 或 192dpi。
这个值到底是怎么计算出来的？有公式之类的吗？
你有点把事情复杂化了。
使用 css，您使用 css 像素。然后，设备本身会根据其分辨率决定如何处理您的 css 像素。对于响应式构建，您可以专门使用 css 像素并允许设备决定如何将这些 css 像素转换为实际的
例如，如果您使用媒体查询：
@media screen and (min-width: 480px)
您会点击任何报告其宽度为 480 css 像素（或更大）的设备。实际物理像素数无关紧要不是css作者的问题
然而，图像不是这种情况的一个领域。您可能希望提供两倍于 Retina 设备质量的图像，因为这些额外的像素对于图像清晰度很有用，在这种情况下，dpi 媒体查询会很有用。 （注意：请记住，许多移动用户宁愿快速加载页面，也不愿拥有四倍大小的超高质量图像）。
@media screen and (min-resolution: 192dpi) {
/* load that high definition image here */
}
设备像素和 dpi 之间的比率是像素大小的函数，因此这是根据设备逐个设置的，通常取决于制造商可以将其像素制作成多小以宣传最高分辨率显示. Retina 在这个领域向前迈出了一大步。