了解智能布局的指南针精灵生成

Question

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

使用指南针精灵的最佳方式是什么？

使用水平或垂直布局似乎对我来说很好。但我无法使用智能布局。我总是面临同样的问题：当在某些点缩放页面（放大或缩小）时，我可以在我的精灵上看到一些兄弟精灵。它被重叠了。

似乎使它工作的唯一方法是通过指南针精灵的配置添加一些空间，但智能布局不支持这一点。

那么，该怎么办？

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

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

但是由于这些重叠的问题，使用智能布局对我来说完全没用。

你们平时都做什么？

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

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

提前非常感谢！

Answer 1

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

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

不要将 CSS sprite 与外部样式表一起使用 - 资源在 外部样式表显然只有在外部 样式表已下载，并且仅在规则匹配 元素。它们提供的减少 HTTP 请求的优势是 由于它的多路复用，SPDY 是不必要的。因此，CSS 精灵 只是让它慢一点。