Devices with Retina displays have been with us for a while, and now Retina 3x is a thing. So how to write media queries to target devices with those pixel densities?

If you use include-media, a Sass library for writing simple, elegant and maintainable media queries that I've talked about here and here, then all you'll need is:

/* Retina 2x */
@include media("retina2x") {
	color: #bad;
}
/* Retina 3x */
@include media("retina3x") {
	color: #bad;
}

Under the hood, this will generate this CSS:

/* Retina 2x */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  color: #bad;
}
/* Retina 3x */
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi) {
	color: #bad;
}

So yes, you can just use plain CSS and ditch the library, but things get more complicated when you also want to limit the viewport width because of the way the OR operator works in CSS. Let's say that you want to target retina 2x devices on a viewport width greater than 750px.

/* Plain CSS */
@media (min-width: 751px) and (-webkit-min-device-pixel-ratio: 3), 
(min-width: 751px) and (min-resolution: 350dpi) {
	color: #bad;
}

Whereas with include-media you can just write:

@include media("retina2x", ">750px") {
	color: #bad;
}

See more examples at include-media.com. ∎