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

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

 

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

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

 

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

 

正常PC设置时：

 .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