CODEWITHSUNDEEP
cssretina
Cameron
Cameron

Reputation: 28853

Media query for retina and non-retina so only one graphic is loaded

When I write media queries I always specify both the min and max so that I don't override the CSS for a background image when the device is at a certain size, instead it just loads the one I want.

So:

@media (max-width: 767px) { background-image: url(''); }
@media (min-width: 768px) { background-image: url(''); }

instead of:

background-image: url('');
@media (min-width: 768px) { background-image: url(''); }

Note: I use SCSS so the above nested syntax is valid.

However when it comes to retina...

How do I do the same pattern? So instead of overriding the image like:

background-image: url('');
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { background-image: url(''); }

I want do something more like:

@media (-webkit-max-device-pixel-ratio: 2), (max-resolution: 2dppx) { background-image: url(''); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { background-image: url(''); }

But what do I set the max one to? as usually you just go one pixel below your min to prevent the double breakpoint issue. What would the resolution need to be? 1.9dppx and 1.9 ratio?

Update: it looks like you don't need to do the same as pixels to prevent double breakpoint for the resolution and it works as is.

Upvotes: 1

Views: 158

Answers (0)

Related Questions