How the background-size of the mobile CSS sprites is calculated.

This is the first problem that has been encountered in the recent practice of mobile instances. How to find the picture position you need.

In addition, I see that CSS sprites is much faster than Dataurl, but I am looking at an analysis of the 13, many years past, do not know how the latest.

I do not know whether to write the image element is the IMG tag or use background it?

The following is a look at how to calculate the Background-size data. Thanks for sharing.

When normal PC settings:

1. S1{
2width:22px;Height:38px;background-position:-118px-0px;
3Background-image:URL (images/icon2b.png);
4Display:Inline-block;
5}

But on iOS, because the iphone is double-displayed, so:

@media screen and (-webkit-min-device-pixel-ratio:2), screen and (Max-moz-device-pixel-ratio:2){
. s1{
Width:11px;Height:19px;/*half before the target.*/
Background-position:-59px-0px;/*change before half*/
Background-image:URL (images/icon2b.png);
Display:Inline-block;
Background-size:180px 180px;/*size is half the size of a CSS sprites picture*/
}

}

the background-size is calculated as follows:

High resolution image width (PC)/target image width (phone) = X

Original sprites image width/x = background-size Width value

Here I set the computer picture width for (computer): 22

Here I set the phone target width is: 11

The original sprites image size is: 360*360

x=22/11=2

Background-size Width: 360/x=180px

background-position:-59px 0 (calculation method: Original (-118) divided by x)

Thank: Source:http://www.luchanan.com/archives/322

How the background-size of the mobile CSS sprites is calculated.