We remember media queries like this from Chapter 6, Becoming Responsive:
@media all and (max-width: 400px) { /*rule sets here*/}
There are two parts to the media query, the media type and media feature:
@media media type and (media feature) { /*rule sets here*/}
The media type can be keyword values such as screen, print, speech, and all. The media feature can be a number of things as well. In the responsive chapter, the feature was the max-width of the browser. For retina however, we want to query for the pixel-ratio of the screen:
@mediascreen and (-webkit-min-device-pixel-ratio: 2),screen and (min-resolution: 192dpi) {}
A lot is going on in the preceding sample. There are two different queries targeting ...
