css - 了解智能布局的 compass Sprite 生成

Question

所以，经过几天的研究，我不得不写下这个问题:

使用 compass Sprite 的最佳方式是什么？

使用水平或垂直布局似乎对我来说效果很好。但我无法使用智能布局。我总是面临同样的问题:在某些点缩放页面(放大或缩小)时，我可以在我的 sprite 上看到一些兄弟 sprite。它会重叠。

似乎让它工作的唯一方法是通过 compass Sprite 的配置添加一些空间，但这不支持智能布局。

那么，怎么办？

始终使用水平或垂直布局？性能影响是什么？

我的意思是，随着 Sprite 数量的增加，生成的图像的大小会非常大。在 compass 的文档中，他们说这会导致性能问题......

但由于存在重叠问题，使用智能布局对我来说完全没用。

你们这些人通常做什么？

可以一直使用水平或垂直布局，并让生成的文件垂直或水平增长而不是以最佳方式增长吗？

问这个原因我们很快就会转向移动设备并执行是一个关键点。

提前致谢!

Answer 1

图像大小的限制因素是像素总数，因此如果您将它们放在行中而不是正方形中，应该没问题。此外，如果设计允许，您可以将元素边框和背景添加到每个 Sprite 边框，这样看起来就不错了。

但请注意，对于即将到来的互联网标准， Sprite 的意义要小得多。例如SPDY :

Don't use CSS sprites with external stylesheets - Resources in external stylesheets are obviously only discovered after the external stylesheet has been downloaded, and only once the rule matches an element. The advantage they provide of reducing HTTP requests is unnecessary with SPDY due to its multiplexing. Therefore, CSS sprites just make it slower.