移动端 CSS sprites 的 background-size 如何计算的。

最近践行 移动端实例，第一遇到的问题就是这个。如何找到自己需要的图片位置。

 

另外我看到说 CSS sprites 比 DataURL 要快很多，不过我看的是13年的一个分析，这好多年过去，不知道最新的如何。

我其实还不知道写图片元素的话 是用 img标签呢 还是用 background 呢？

 

以下是查阅到的如何计算background-size 的资料。感谢分享。

 

正常PC设置时：

1  .s1{
2      width: 22px; height: 38px; background-position: -118px -0px;
3      background-image: url(images/icon2b.png);
4      display: inline-block;
5  }

 

但在ios上，因为iphone 上是双倍显示的，so：

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max-moz-device-pixel-ratio: 2) {
    .s1{
        width: 11px; height: 19px; /* 目标 之前的一半 */
        background-position: -59px -0px; /* 改变 之前一半 */
        background-image: url(images/icon2b.png);
        display: inline-block;
        background-size: 180px 180px; /* 大小 是css sprites 图片的一半大小 */
    }

} 

background-size计算方式为：

高分辨率图像宽度（电脑） / 目标图像宽度（手机） = X 

原始Sprites图像宽度 / x = background-size的宽度值

这里我设置的电脑图片宽度为（电脑）：22

这里我设置的手机目标宽度为：11

原始sprites图片大小为：360*360

x=22/11=2

background-size宽度：360/x=180px

 

background-position:-59px 0（计算方式：原来的（-118）除以x）

 

感谢：源头：http://www.luchanan.com/archives/322