我们什么时候在 css 中使用媒体查询 "resolution"？

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 较低的用户会运行看着你，将你抱在怀里，感谢你节省了宝贵的带宽。

When do we use media-queries "resolution" in css?