CSS3 processing Sprite background image compression to solve the problem of H5 Web page icon blur under the mobile browser

recently in charge of a H5 app project, encountered a depressed problem, the mobile browser to view the page when the icon is blurred, serrated, the Computer browser display is normal. probably know is the resolution adaptation and other types of problems, and later on the Internet to find some methods, most of the solution is to design a set of magnification 1 time times the icon, and then compressed display.

We all know that tags can be fixed in a wide-height way to compress large images, resulting in high-definition display, and icons are generally used in the background map to show, how to do? Well, CSS3 's got a really cool property. Background-size can directly set the width of the background map, directly solve the former doubts.

So the problem is, our web page can not be a separate image for each icon to load, so that each picture will be an HTTP request cost, we generally do is to put multiple small pictures in a large picture, and then through the Sprite (sprite) Background-position positioning method to solve, as long as loading a large picture, you can complete the display of multiple icons, reduce the cost of HTTP requests, improve performance. So, we also want to enlarge 1 time times the HD icon also in a large picture, through the background-position to locate each corresponding icon, and compression. On the internet to find a lot of ways, and finally found a reliable solution:

1) First, we want to prepare two pictures lined up (must be lined up, explained below), one is the original size, the other one is 1 time times the size of magnification

(map-icon.png)

([email protected])

2) The original wording, mainly in the Computer browser display, we use the original map-icon.png can be

  /*/Page Tags:  <a class= "control" ><span class= "car" ></span></a>  <a class= " Control "><span class=" position "></span></a>*//* load the container of the icon, fixed width high, the padding is set to 0 */.control {display:block; Text-decoration:none; padding:0; width:30px; height:30px; }/* icon label, Width height auto fill */.car,.position,.zoom-in,.zoom-out {display:block; width:100%; height:100%; Background:url (images/ map-icon.png) No-repeat;}. Car {background-position:0 0;}. Position {background-position: -30px 0;}. zoom-in {background-position: -60px 0;}. zoom-out {background-position: -90px 0;}

3)The question is, how do we know what the Background-size property value is set to? Later found a formula:

High resolution image Width/target Image width = x Original sprites image width/x = background-size Width value

Well, the principle of the formula we are not here to expand, directly write up to try:

60/30 = 2 is the magnification factor

large figure of 7 60x60 total width 420

420/2 = 210 is the width of the background-size

and Background-size's high, we set it here to Auto, and then switch on the big picture of @2x to compress it.

Also, we have to declare a media Queries on the outer layer, which is specifically for Retina screen device displays

/* Mobile Media query pixel ratio */@media only screens and (-webkit-min-device-pixel-ratio:2), only screen and (Min--moz-device-pixel-ratio: 2), only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1), only screen and (Min-device-pixel-ratio:2) {. Car,.position,. zoom-in,.zoom-out {Background:url (images/[email protected]) no-repeat;        background-size:210px Auto;} /* Note that this is still a 30-pixel location to find */.car {background-position:0 0;}. Position {background-position: -30px 0;}. zoom-in {background-position: -60px 0;}. zoom-out {background-position: -90px 0;}}

Conversely, it seems that the value of the height can also be given, the width of auto adaptive, but I tried, not too easy to succeed. We will be directly in line with a row of icons, give the background map to the width of the line!

Finally, before and after using this scenario:

(Before processing)

(after processing)

CSS3 processing Sprite background image compression to solve the problem of H5 Web page in mobile browser logo blur