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;
    }
}

（两者from CSS Tricks，前者used in Bootstrap。）

如果我想为较新的@ 3x Retina图像添加一些内容，我可以看到我会将pixel-ratio更改为3，并将2dppx设置为3dppx但是。 .. 192dpi怎么样？我无法找到对@ 3x图像设置dpi的参考。

Answer 1

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

理论上，您也可以使用image-set，但支持非常差AFAIK（仅限Blink / WebKit，带有webkit前缀）。

但我得问一下，哪个浏览器仅支持dpi并且不支持dppx？

在CSS中指定@ 3x Retina图像

1 个答案: