有没有办法在css媒体查询中使用DPI而不是px

Question

像素数量的宽度和高度并不总是说明整个故事。这对于添加或删除屏幕上的项目非常有用，但对于设置正确的图像并不太合适。通过MBP上的视网膜显示，设置为屏幕一半的浏览器窗口的宽度像现在的大多数机器一样。然而，鉴于DPI较高，显示的图像可能会太小。

有没有一种方法可以根据DPI更改图像而不是像素数量的宽度和高度？

Answer 1

您可以执行：

<link 
    rel="stylesheet" 
    type="text/css" 
    href="/css/retina.css" 
    media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)" 
/> 

或

@media only screen and (-moz-min-device-pixel-ratio: 2), 
     only screen and (-o-min-device-pixel-ratio: 2/1), 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-device-pixel-ratio: 2) { 
/*use CSS to swap out your low res images with high res ones here*/ 
} 

Answer 2

你要找的是设备像素比例。因为像iPhone这样的显示器就像一个320像素的屏幕，但具有640像素的布局（像素比为2）。在媒体查询中，使用“device-pixel-ratio”。虽然我会确保仍然使用供应商前缀。

好的帖子就可以了：http://menacingcloud.com/?c=highPixelDensityDisplays

Answer 3

也有<img srcset>和-webkit-image-set CSS功能，但他们似乎是通过Safari /铬/歌剧仅支持。示例：

<img src="image.png" srcset="image-1x.png 1x, 
    image-2x.png 2x, image-3x.png 3x"> 

background-image: -webkit-image-set(
    url(icon1x.jpg) 1x, 
    url(icon2x.jpg) 2x 
); 

我不确定Moin Zaman接受的答案中的示例是否适用于IE/Firefox。可能需要使用“最小分辨率”：

@media only screen and (min-resolution: 192dpi), 
     only screen and (min-resolution: 2dppx)