使用CSS精灵，同时仍支持高密度显示

Question

是否可以使用CSS精灵并仍然支持高密度（例如视网膜）显示？这可能意味着将普通和双分辨率图像打包成一个精灵表...问题是如何指定偏移量？另一种可能的解决方案是以某种方式检测（如何？）屏幕的密度并将一个类应用于身体。

有人遇到过这个问题吗？任何优雅的解决方案？

Answer 1

您可以使用min-device-pixel-ratio媒体查询加载单独的精灵表（并指定单独的偏移），或在同一个精灵表中指定单独的偏移。

最好为每个密度使用单独的spritesheet，这样客户端就不需要下载无法显示的像素。

您可以使用LESS或SASS mixin指定一次偏移，并生成第二个媒体查询规则，使偏移量加倍。

Answer 2

就像这样： -webkit敏设备象素比率

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
ul li {
background-image: url('icons-sprite@2x.png');
}
}

这可能是 retina.png 或者你拥有高清版本......

这适用于任何高清平板电脑和手机