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?
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.