Media Queries 13
Figure 2-2: Different style rules applied with the width media feature, displayed in a desk-
top browser and mobile (inset)
The height media feature works in the same way, except it targets
browsers based on their height instead of width. The syntax is the same
as width and also permits using max- and min- prefixes:
@media (height: value) { rules }
@media (max-height: value) { rules }
@media (min-height: value) { rules }
Because of the prevalence of vertical scrolling, however, height is used
much less frequently than width.
Pixel Ratio
In general, the CSS pixel unit (px) is a measurement of a single pixel on the
computer screen—if your browser viewport is 1024 pixels wide and you give
an element a width of 1024px, you expect it to fill the horizontal length of
the viewport. Many new devices, however, especially smartphones and tab-
lets, have super-high resolution screens, which would make an element with
a width of 1024 pixels seem quite small and hard to read when displayed.
To get around this, these newer devices often have a notional CSS pixel,
separate from the physical pixels of the device, allowing for zooming in and
out of the content and for high graphical fidelity on the small screen. The
ratio of physical pixels to CSS pixels is known as the device pixel ratio (DPR).
The iPhone 5S, for example, has a DPR of 2, which means that one CSS
pixel is equal to 4 physical pixels—2 horizontally and 2 vertically.
