什麼時候我們在css中使用media-queries「resolution」？

Question

今天，我發現The resolution CSS data types，我沒有找到一個真正的用法。有沒有人曾經使用過這個功能或任何示例用例？

Answer 1

一個現實世界的例子是使用網頁進行文檔的打印時：

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

當打印DPI設置在爲300dpi最小以上媒體查詢將顯示給定的風格。

Answer 2

如果你有一些內容需要至少300dpi（藝術家/攝影師等），你可以要求觀衆至少有一個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屏幕較低的用戶會跑到你身邊，抱着你，並感謝你節省寶貴的帶寬。