The realization of Sprite diagram of moving side sprite

In the case of mobile adaptation, usually with REM as a long-width unit, so, under different devices, the actual width of the element (PX) is not the same, if it is a single picture as a background picture, the most convenient, as long as the background image set the properties background-size:contain| conver|100% can cover the entire div with a picture.

Second, if you use Sprite chart, then you have to change the size and position of the background image to REM units. background-position:x.x rem y.y Rem;background-size:xxrem Yyrem; This is to convert the PX of the design to REM. The principle is the size of the background image, as well as the display of the background image position with REM to the relative change, you can correctly display the corresponding icon.

The realization of Sprite diagram of moving side sprite