Css3 compresses the sprite background image to solve the problem that H5 web pages are blurred under the mobile browser.

Css3 compresses sprite background images to solve the problem of h5.

Recently, I was in charge of an H5 App project and encountered a depressing problem. When I checked the webpage on a mobile browser, the icons were blurred and the display of the browser on the computer was normal. I probably know that it is a problem of resolution adaptation and other types. Later I found some ways on the Internet. Most of the solutions are to design a set of icons that are doubled, and then compress the display.

We all know that labels can compress large images with fixed width and height to achieve high-definition display. However, icons are generally presented using background images. How can this problem be solved? Well, css3 has a very powerful attribute background-size, which can directly set the width and height of the background image, directly solving the doubts of the former.

Then the problem arises. It is impossible for a webpage to be loaded with an independent image for each icon, so that each image will be an http request overhead, the general practice is to put multiple small images in a large image, and then solve the problem by using the sprite background-position Positioning method, as long as a large image is loaded, you can display multiple icons to reduce http request overhead and improve performance. Therefore, we also hope to put the doubled HD icon in a large image, locate each corresponding icon through the background-position, and compress it. I found many methods on the Internet and finally found a reliable solution:

1) first, we need to prepare two images in a row (which must be arranged in a row, as described below). One is the original size, and the other is the size doubled.

(Map-icon.png)

(Map-icon@2x.png)

 

2) The first writing method is to display it on a computer browser. We can use the source image map-icon.png.

 

/* // Webpage Tag: * // * container for loading icons, fixed width and height, and set the inner distance to 0 */. control {display: block; text-decoration: none; padding: 0; width: 30px; height: 30px;}/* icon label, automatically filled with width and height */. 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 problem is, how do we know how many background-size attribute values should be set? Then we 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 will not be expanded here. Just write it and try it:

60/30 = 2 (magnification)

The total width of 7 images in 60x60 is 420

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

The background-size is high. We can set it to auto here, and compress it with the big image of @ 2x.

Also, we must declare a Media Queries on the outer layer. This Media Queries is dedicated to the display of the Retina screen device.

 

/* Pixel ratio of mobile media query */@ media only screen and (-webkit-min-device-pixel-ratio: 2 ), only screen and (min -- moz-device-pixel-ratio: 2), only screen 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/map-icon@2x.png) no-repeat; background-size: 210px auto;}/* Note that the location is 30 pixels long */. car {background-position: 0 0 ;}. position {background-position:-30px 0 ;}. zoom-in {background-position:-60px 0 ;}. zoom-out {background-position:-90px 0 ;}}

On the contrary, it seems that the height value can also be given, and the width is auto-adaptive, but I tried it and it is not easy to succeed. In the future, we will use a line of icons to arrange them. Just assign a value to the background image!

 

Finally, we provide the following before and after using this solution:

(Before processing)

 

(After processing)