css - 这个用于“视网膜”显示器的 CSS 精灵解决方案有什么缺点吗？

Question

我的想法，假设你从一个 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/

我一直在努力确定提供更高分辨率图像的最佳方法（以前我将所有图像分开并单独调整它们的大小），坦率地说，这似乎太简单了。

任何人都可以看到任何潜在的缺点吗？我正在玩弄这个以供生产使用，到目前为止它似乎有效。

Answer 1

由于在加载时调用了针对视网膜的媒体查询，因此它应该覆盖原始调用以加载小图像。在视网膜显示器上使用这种方法时，我从未目睹过低分辨率图像闪烁。

有没有人使用 JS 来确认较小的图像加载到视网膜显示器上？我很想知道。