1

以下では、倍密度ディスプレイに大きな背景画像を使用したいと考えています。ただし、メディア クエリをサポートするデバイスは、より大きなイメージのみをダウンロードするのでしょうか、それとも両方をダウンロードするのでしょうか?

.logo {
    background: url('logo.jpg');
}

@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) { 

     .logo {
         background: url('logo-double-density.jpg');
         background-size: 40px 40px; //size is half of the actual image 
     }

}
4

2 に答える 2

1

以前の背景プロパティが上書きされているため、大きな画像のみをダウンロードします。

これはブラウザで簡単にテストできます (私は Chrome を使用していますが、他の人も同じことをすると確信しています)。

いくつかの CSS を次のようにします。

body {
    background-image: url(somethingThatDoesNotExist.jpg);
}

body {
    background-image: url(somethingElseThatDoesNotExist.jpg);
}

コンソールを見て、404 エラーを確認します。1 つしか表示されません: http://jsfiddle.net/RYPu9/

于 2013-09-12T13:59:06.843 に答える
0

Modernizrを使用していますか? もしそうなら、css で行うことは次のことだけなので、生活が楽になります。

.logo {background: url("../logo.svg") no-repeat;}
.no-svg .logo {background: url("../logo.png") no-repeat;}
于 2013-09-12T14:08:42.527 に答える