我正在构建一个响应式网站,因此我一直在阅读有关移动设备和 iPhone 上的 CSS Sprite 的信息。我发现this article ,我认为这是正确的技术,但解释可能会更好。我最终得到了这个:
有人可以告诉我它在 iPhone 上看起来是否正常吗?我不确定那50%。 另外,有没有人有更好的文章?
最佳答案
您为启用 Retine 的设备指定的 background-size
属性应包含非 Retina sprite 的大小,即宽度和高度的一半视网膜 Sprite 。它应该是整个 Sprite 的大小,而不仅仅是 Sprite 中单个图标的大小。
更新的 fiddle : http://jsfiddle.net/jhogervorst/qr5fs/2/
屏幕截图(视网膜): /image/sIDnE.png
CSS:
@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) {
.action {
background-image: url(http://dl.dropbox.com/u/13823768/masonry/img/test-sprite2x.png);
-moz-background-size: 153px 64px;
-o-background-size: 153px 64px;
-webkit-background-size: 153px 64px;
background-size: 153px 64px;
}
}
关于iphone - 针对视网膜显示优化的 Sprite ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10367755/