“视网膜”显示的CSS精灵解决方案有什么缺点吗?

前端之家收集整理的这篇文章主要介绍了“视网膜”显示的CSS精灵解决方案有什么缺点吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我的想法,假设你从200×200精灵开始(意味着双分辨率图像是400×400)是这样的:

.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/

我一直在努力确定提供更高分辨率图像的最佳方式(之前我将所有图像分开并单独调整大小),这坦率地看起来太简单了.

谁能看到任何潜在的缺点?我正在玩这个用于生产用途,到目前为止似乎工作.

最佳答案
由于在加载时调用视网膜的媒体查询,它应该覆盖原始调用以加载小图像.
在视网膜显示器上使用此方法时,我从未目睹低分辨率图像闪烁.

有没有人用JS来确认视网膜显示器上的较小图像是否加载?我很想知道.

猜你在找的CSS相关文章