1

I am currently working on a responsive project. I have the layout sorted out and now I am implementing the media queries. I understand the concept of width, device-width, device-pixel-ratio, and the difference between physical pixels and CSS pixels.

However, the resolution media query is confusing to me. I find many non-retina displays have a CSS resolution of 96ppi or 96dpi and the retina displays have a resolution of 192ppi or 192dpi.

How exactly is this value calculated? Is there like a formula or something?

5
  • media queries work on a screen/ print /all etc. basis and device width mainly. don't worry about the dpi Jul 29, 2015 at 19:29
  • The formula to calculate the resolution now a days is : resolution = 96dpi or for retina : resolution = 192dpi :-)
    – Zimmi
    Jul 29, 2015 at 19:31
  • @RachelGallen I have read that one already. Thanks for the reply
    – Vikrant m
    Jul 30, 2015 at 14:50
  • @Zimmi That would be much simpler, wouldn't it? ;)
    – Vikrant m
    Jul 30, 2015 at 14:51

1 Answer 1

5

You're over complicating things somewhat.

With css, you work with css pixels. The devices themselves then decide what to do with your css pixels depending on their resolutions. For responsive builds you can work exclusively with css pixels and allow the devices to decide how they convert those css pixels to actual

For example, if you used the media query:

@media screen and (min-width: 480px)

you would hit any device that reported it's width to be 480 css pixels (or greater) wide. The actual number of physical pixels is irrelevant is not the problem of the css author.

One area where this is not the case is images however. You might want to serve up images that are twice the quality to retina devices as those extra pixels will be useful for image clarity, in which case a dpi media query would be useful. (caveat: bear in mind many mobile users would rather have a page load quickly than have a super high quality image that is four times the size).

@media screen and (min-resolution: 192dpi) {
    /* load that high definition image here */
}

The ratio between device pixels and dpi is a function of the size of the pixels, so this is set on a device by device basis, usually depending on how tiny the manufactures can make their pixels to advertise the highest definition display. Retina was a big step forward in this area.

1
  • Thank you so much Toni. I would keep in mind everything you said. Cheers :)
    – Vikrant m
    Jul 30, 2015 at 14:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.