Now the development of mobile waP page, I believe that we will use a powerful REM unit to adapt to various models and screens; In order to reduce the number of network requests and improve the performance of web page access, it is common to merge multiple small ICONS into a Sprite map and then locate them according to background-position. However, due to the calculation deviation of the computer, the icon display often has 1 to 2 pixel deviation;

One, PC

If on the PC side, Sprite map positioning is actually very simple, not to say much, directly on the code:

The HTML code

<ul class="sprites-box">
    <li class="icon icon-bill"></li>
    <li class="icon icon-emailmsg"></li>
    <li class="icon icon-import"></li>
    <li class="icon icon-music"></li>
    <li class="icon icon-pay"></li>
    <li class="icon icon-search"></li>
    <li class="icon icon-speak"></li>
    <li class="icon icon-task"></li>
</ul>
Copy the code

CSS code

body, ul { margin: 0; }
ul { padding: 50px; list-style: none; overflow: hidden; }
li { float: left; margin: 10px; }
.icon { background-image: url('./sprite.png'); }
.icon-bill { background-position: -35px 0px;  width: 32px; height: 32px; }
.icon-emailmsg { background-position: 0px -32px; width: 32px; height: 32px; }
.icon-import { background-position: -32px -32px; width: 32px; height: 32px; }
.icon-music { background-position: -67px 0px; width: 32px; height: 32px; }
.icon-pay { background-position: 0px 0px; width: 35px; height: 32px; }
.icon-search { background-position: -67px -32px; width: 32px; height: 32px; }
.icon-speak { background-position: 0px -64px; width: 32px; height: 32px; }
.icon-task { background-position: -32px -64px; width: 32px; height: 32px; }
Copy the code

The effect

Because it uses PX positioning, and the screen unit and multiplier are fixed, so it can perfectly achieve the Sprite image effect;

Second, mobile terminal

On the mobile terminal, due to the screen multiplier of various models, the layout using PX as a unit will have great adaptation problems. Therefore, the mainstream adaptation scheme is to use REM as a unit and calculate the base value of REM for adaptation according to the screen multiplier.

I am based on the 750 width of the design draft, and the value of each 1rem is 100px in the design draft; Because the size of icon is basically the same, so do a little processing, cut off the transparent part of icon, synthesis of the size of the Sprite diagram is not uniform;

1. Convert directly to REM units

After conversion, the CSS code of the above Sprite image is:

body, ul { margin: 0; } ul {padding: 0.5rem; list-style: none; overflow: hidden; } li {float: left; Margin: 0.1 rem; } .icon { background-image: url('./sprite.png'); Background - size: 0.96 rem 0.92 rem; background-repeat: no-repeat; }. Icon-bill {background-position: -0.67 rem-0.26 rem; Width: 0.28 rem; Height: 0.26 rem; }. Icon-emailmsg {background-position: 0-0.64 rem; Width: 0.26 rem; Height: 0.28 rem; }.icon-import {background-position: -0.26 rem-0.64 rem; Width: 0.26 rem; Height: 0.28 rem; }.icon-music {background-position: -0.35rem 0; Width: 0.32 rem; Height: 0.32 rem; } .icon-pay { background-position: 0 0; Width: 0.35 rem; Height: 0.32 rem; }.icon-search {background-position: -0.32 rem-0.32 rem; Width: 0.29 rem; Height: 0.27 rem; }.icon-speak {background-position: 0-0.32 rem; Width: 0.32 rem; Height: 0.32 rem; }.icon-task {background-position: -0.67rem 0; Width: 0.29 rem; Height: 0.26 rem; }Copy the code

Effect:

It can be seen from careful attention that some parts of the display will have a deviation of about 1px, which is caused by the calculation deviation of different mobile phones. If the icon is relatively simple, it is ok to accept this effect, but if the requirements for icon display are high, this method obviously cannot meet the requirements.

2. Positioning is carried out by percentage after converting to REM

First, confirm the concept of background-position using percentage positioning:

When the property value is percentage, the box for Sprite and display icon will be placed with the specified point as the overlap point. In short, if the value is 10% 20%, it means that the points in the position of 10% 20% of the Sprite graph coincide with the points of 10% 20% of the display box (not 0% 0%)

For example, if you have a 200X200 Sprite and a 50X50 icon display box, set background-position to 0%;

The effect is as follows:

If background-position is set to 100% 100%; , will first obtain the icon box 100% 100% position points, and the Sprite diagram 100% 100% position points, and then overlap them;

The effect is as follows:

It can be seen that: the effect of percentage positioning is equivalent to locating the upper left corner of the Icon box to the 100% 100% position of the Sprite picture, and then moving back to the 100% 100% position of the Icon box to the upper left;

This is what happens when we know the percentage, and when we get the Sprite graph, we usually know something like this:

  • Size of each icon
  • Sprite diagram size
  • Location of each icon in the Sprite diagram

At this point, we need to use known conditions to calculate the percentage of positioning, which becomes a mathematical problem:

Given that the width and height of icon are 50 and the width and height of Sprite are 200, the coordinates of the upper left corner of icon in Sprite are (50, 60), and its backbackground position is calculated;

Solution: Because the concept of background-position positioning is that icon box and Sprite map specify the position of the same; Suppose: Sprite width is W, height is H, icon width is W, height is H, icon's coordinates in Sprite are (x,y), so the percentile coordinates are (m,n), the following formula can be obtained: MW - mW = x = > m (W - W) = = > m = x/x (W - W) * 100% nH - nH = y = > n (H - H) = = > n = y/y (H - H) * 100% computation available: M = 50 / (200-50) * 100% = 33.3% n = 60 / (200-50) * 100% = 40%Copy the code

Of course, the formula is as above, if written in CSS, you need to calculate with CSS calculation method calc(), if the students are not clear about calc baidu; If the students use SCSS or LESS CSS precompiler to write the style is more simple, directly write a mixed method to fix;

3. Other ways

  • Each small icon uses a single image, then throughbackground-size: cover|100%|contain;Can also be perfect display, but a page icon more than when, the request is too much, the browser is limited to the number of concurrent requests, which will lead to the page load time greatly longer, not cost-effective;
  • Each little icon turns intobase64Image, and then directly into the code:
    • Advantages: 1. Display ICONS completely. 2. Reduce the number of requests
    • Disadvantages: 1. Colorful pictures turned intobase64Poor effect; 2. Will increase the picture mention, equivalent to using download time for request time;

Ok, this article to share here, the first time to write an article, sentence and way inevitably have flaws, I hope you look at the guest master forgive me.