Mobile-side CSS Sprite icon Positioning learning notes

In the mobile phone, I rarely use the sprite map merge positioning icon, with more than the use of the font icon to replace some of the icons when they are a single cut out of control.

Look at the mobile phone side of the Web site these icons are used to merge the sprite map, because the phone has been the size of the screen, so it is usually the design of proportional scaling of the form to display, the percentage of the way to layout, to achieve adaptive.

Now let's talk about the case of Ctrip mobile phone:

First of all, this sprite is the same as the PC side, but the phone to the side of the scale.

The first is the merged sprite chart:

We found no, sprite size and original figure is just twice times the scale.

Another is the original width and height, and the coordinate position of the icon. Obviously the width and height of the element is the width and height of the icon to be displayed, which is also scaled twice times.

The following figure is one of the display icon elements, including width, height and left the value of just about twice times, so see here all understand it, mobile phone-side sprite is to do so, it is quite simple, than the PC side is more than one step scaling calculation, haha.