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 ?
When do we use media-queries "resolution" in css?
1.8k Views Asked by Shimrra At
3
There are 3 best solutions below
0

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.
0

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.
One real-world example usage is when performing printing of web document:
The above media query will display given styles when printing DPI is set at minimum of 300dpi.