Question

今天，我发现The resolution CSS data types并且我找不到真正的用法。有没有人曾经使用过这个功能或任何用例？

Answer 1

如果您的某些内容至少需要300dpi（艺术家/摄影师等），则可能要求观看者至少拥有300dpi的屏幕。如果观众没有，你可以发出一条消息，说他们没有足够像素密度的屏幕来观看内容。

Answer 2

一个真实的示例用法是在执行Web文档的打印时：

@media print and (min-resolution: 300dpi) { ... }

当打印DPI设置为最小300dpi时，上述媒体查询将显示给定的样式。

Answer 3

想象一下，您通过CSS在同一尺寸的元素中显示图像：

.my-image {
  background-image: url(path/to/image.jpg);

  /* Exact dimensions of image */
  height: 200px;
  width: 200px;
}

看起来很棒，直到你在更高的DPI屏幕上看到它。顺便提一下，许多智能手机和平板电脑都有更高的DPI屏幕。通过媒体查询，您可以提供更高质量的图像。

@media (min-resolution: 72dpi) {
  .my-image {
    background-image: url(path/to/image-large.jpg);
  }
}

基本上是渐进式增强。具有较低DPI屏幕的用户将在您身边运行，将您抱在怀里，并感谢您节省宝贵的带宽。