5

私の考えでは、200x200のスプライト（倍解像度の画像が400x400であることを意味します）から始めると仮定すると、次のようになります。

.sprite {
    background-image:url('1x.png');
    background-repeat: no-repeat;
    background-size: 200px 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .sprite {
        background-image:url('2x.png');
    }
}

実例： http： //ov3rkill.com/temp/a5dii52/

私はしばらくの間、より高解像度の画像を配信するための最良の方法を決定しようと奮闘してきました（以前はすべての画像を別々に保ち、個別にサイズを設定していました）。これは率直に言って単純すぎるようです。

誰かが潜在的な欠点を見ることができますか？私はこれを本番環境で使用するためにいじっていますが、これまでのところ機能しているようです。

4

1 に答える 1

4

網膜のメディアクエリはロード時に呼び出されるため、小さな画像をロードするための元の呼び出しをオーバーライドする必要があります。Retinaディスプレイでこの方法を使用しているときに、低解像度の画像が点滅するのを目撃したことはありません。

JSを使用して、小さい画像がRetinaディスプレイに読み込まれることを確認した人はいますか？知りたいです。

于 2012-04-16T20:10:40.973 に答える