Posted at

Retinaディスプレイを分岐するmixin

More than 3 years have passed since last update.

@mixin media-retina() {

@media only screen and (min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
@content;
}
}

// 使い方

.aaaa {
@include media-retina {
background-image: url(aaaa@2x.png);
}
}

device-pixel-ratioで分岐するMedia Queryを内包しているだけですが、

コードを短くできます。