是否可以使用 CSS 精灵并仍然支持高密度（例如视网膜）显示？这可能意味着将正常和双分辨率图像打包到单个精灵表中......问题是我将如何指定偏移量？另一种可能的解决方案是以某种方式检测（如何？）屏幕的密度并将类应用于身体。
有人遇到过这个问题吗？任何优雅的解决方案？
问问题
333 次
2 回答
3
您可以使用min-device-pixel-ratio媒体查询加载单独的精灵表（并指定单独的偏移量），或者在同一个精灵表中指定单独的偏移量。
最好为每个密度使用单独的精灵表，这样客户端就不需要下载他们无论如何都无法显示的像素。
您可以使用 LESS 或 SASS mixin 指定一次偏移量并生成第二个媒体查询规则，使偏移量加倍。
于 2013-09-24T02:43:53.837 回答
2
像这样： -webkit-min-device-pixel-ratio
@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或任何你拥有的高清版本...
这应该适用于任何高清平板电脑和手机
于 2013-09-24T02:50:48.187 回答