How to make retina sprites?

Question

css

Hello. I can't figure out how to do the right retina sprites.
Gulp generate 2 sprite files. One with regular icons, the second with 2 times larger ones. Then I give the block the following styles:
.block:before{content: ''; width: 10px; height: 16px; position: absolute; top: 0; left: -20px background: url("../images/sprite.png") no-repeat -104px -18px;}
And then retina styles:
media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5 ),
only screen and (min-resolution: 192dpi) {
.block:before{
background: url("../images/[email protected]") -196px -33px;
}
}
But it turns out that the image under the retina is not scaled. I prescribe background-size: 10px 16px; and the picture of the sprite under the retina is all scaled, and not the desired icon.
How to defeat attack? Thanks in advance

Answer 1

Styles for normal screens should contain:
background-size
background-position
width and height of the icon
and background-image
Style for retina screen only overrides background-image.
In this case, if the sprites match exactly, everything will work.