HTML and CSS Reference
In-Depth Information
Property
Description
Values/Options
[max-|min-]device-height
The height of the device's
screen (equivalent to
screen.height
in JavaScript)
pixels
orientation
The orientation of the device
landscape
,
portrait
[max-|min-]aspect-ratio
The aspect ratio of the
viewport (based on
height/width)
cm (for print), pixels
[max-|min-]device-aspect-
ratio
The aspect ratio of the
device's screen (based on
device-width
,
device-
height
)
cm (for print), pixels
[max-|min-]device-pixel-
ratio
[max-|min-]-moz-device-
pixel-ratio
-o-[max-|min-]device-
pixel-ratio
-webkit-[max-|min-]device-
pixel-ratio
The pixel ratio of the device;
this can be used to pull in
high-resolution images for
devices with a high-pixel
density; this property is also
vendor specific
The idea behind creating media queries is not necessarily to build media queries
to target specific devices (e.g., not to specifically target tablets or mobile
phones), but to cater for specific screen sizes and adjust the content to fit it.
By doing this, you can ensure that your CSS applies to the available space
instead of the target device. We call this responsive web design.
responsive web design. By providing styles for all viewport sizes, styles for
displays up to 480px, and styles for displays up to 768px, the web site responds
appropriately to the available space on any handset or tablet-based device, as
shown in Figure 5-16 and Figure 5-17.
