Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Media queries for retina – the basics Reply To: Media queries for retina – the basics

#151584
Senff
Participant

@TheDoc:

Hmmmm. Your media query for a retina display should have nothing to do with the min/max width of the page, no?

Well, that’s the thing. I do want different things based on the width of the page. Something like this:

  • regular screens: background is white
  • screens smaller than 800: background is blue
  • retina screens smaller than 800: background is red
  • screens smaller than 400: background is yellow
  • retina screens smaller than 400: background is green

Or should I just use the “general” retina media query and nest it in regular media query?

Just for context (since I don’t really want to use background colors, that’s just for example purposes): my page has a header background image, but for screens smaller than 800 the background image is a little different, and for 400 it’s another different background image. That works fine. But for retina screens I want those just to be better-quality images.