How to supported retina @2x, @3x

[yutucc]

Hello, I want to realize function, like this:

In /src/images/slice/ have two pic: test.png and test@2x.png

Css In

.icon-test {
    width: 32px;
    height: 32px;
    background-image: url(../slice/test.png);
}

Css Out

.icon-test {
    background-image: url(../sprite/style-index.png);
}

// Retina 2x supported
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min-resolution: 240dpi) {
.icon-test { 
    background-image:url("../sprite/style-index@2x.png");
    background-position: -36px -66px;
    background-size: 32px;
}
}

reference: gulp-tmtsprite

[vvasilev-]

Hey @Nicholasnc,

Sorry for the late response. Please set retina option to true and the plugin will start to generate the necessary CSS rules. 😄

[yangbin1994]

just set retina？

[vvasilev-]

@yangbin1994 Yes, just set the retina option.

[Lkroner]

Will this retina functionality support 3x images as well? Something like this. I don't see anything in your documentation about it.

[vvasilev-]

@Lkroner The retina option supports 3x images because of these lines. If something doesn't work as you expected, you can use onUpdateRule hook to implement the desired behavior. Here is an example - https://github.com/2createStudio/postcss-sprites/blob/master/examples/output-dimensions.md.