在CSS中指定@3x Retina图像

Question

以前，在CSS中为@1x和@2x使用不同的背景图像时，我做了如下操作：

.block {
    background-image: url(my-image@1x.png); # Standard res.
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

    .block {
        background-image: url(my-image@2x.png); # Retina.
        background-size: 100px 100px;
    }
}

或者只是：

.block {
    background-image: url(my-image@1x.png); # Standard res.
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

    .block {
        background-image: url(my-image@2x.png); # Retina.
        background-size: 100px 100px;
    }
}

( 来自CSS魔法师和用于靴带都是前者。)

如果我也想为新的@3xRetina图像添加一点，我可以看到我会将pixel-ratio更改为3，并将2dppx设置为3dppx，但是.那192dpi呢？我找不到对@3x图像应该设置的dpi的引用。

Answer 1

每英寸的CSS像素设置为96，所以如果您的目标是3x分辨率，则应该将其设置为(min-resolution: 288dpi)。

理论上，您也可以使用image-set，但是支持AFAIK非常糟糕(仅使用Blink/ webkit，带有webkit前缀)。

但我得问，哪个浏览器只支持dpi，而不支持dppx