How to supported retina @2x, @3x

yutucc commented 7 years ago

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- commented 7 years ago

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 commented 7 years ago

just set retina？

vvasilev- commented 7 years ago

@yangbin1994 Yes, just set the retina option.

Lkroner commented 6 years ago

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

vvasilev- commented 6 years ago

@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.

2createStudio / postcss-sprites

How to supported retina @2x, @3x #86