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

Question

Today, i discovered The resolution CSS data types and i don't find a real usage for this. Has anyone ever used this functionality or any examples use case ?

Answer 1

One real-world example usage is when performing printing of web document:

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

The above media query will display given styles when printing DPI is set at minimum of 300dpi.

Answer 2

If you have some content that requires at least 300dpi (artist / photographer etc.) you could require the viewer to have at least a 300dpi screen. If the viewer does not, you can put out a message saying they don't have a screen with high enough pixel density to view the content.

Answer 3

Imagine you’re displaying images, via CSS, in a same-sized element:

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

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

This will look fabulous until you see this on a higher DPI screen. Incidentally, many smartphones and tablets do have higher DPI screens. With a media query, you can serve higher quality images.

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

Basically progressive enhancement. Users with lower DPI screens will run at you, hold you in their arms, and thank you for saving precious bandwidth.