css - 使用 CSS sprites 同时仍然支持高密度显示

Question

是否可以使用 CSS Sprite 并仍然支持高密度(例如，视网膜)显示器？这可能意味着将普通分辨率和双分辨率图像打包到一个 Sprite 表中……问题是我将如何指定偏移量？另一种可能的解决方案是以某种方式检测(如何？)屏幕的密度并将一个类应用于 body 。

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

Answer 1

您可以使用 min-device-pixel-ratio 媒体查询加载单独的 Sprite 表(并指定单独的偏移量)，或在同一 Sprite 表中指定单独的偏移量。

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

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