Making Your Website Look Great Across Multiple Devices - CSS3 Foundations - page 270

height
Applies to: all visual and tactile media types | Accepts min/max prefixes: yes
height describes the height of the viewport on a targeted display, that is, the height of the browser's viewing area.
Media queries tend to use the width media feature more than height , but this feature still has its uses.
For example, you could query the height of the browser to move important elements—ones that you want the users
to see as soon as they visit the page—further up the page when their viewport has a small height. You may decide
that the “25% Off” banner on the Cool Shoes & Socks page would get in the way of more important content when
the browser height is smaller than usual and therefore use a media query to hide it below a certain height.
@media only screen and (max-height: 500px) {
/* styles to be applied to screen devices when the viewport has
a height equal to or less than 500px */
}
device-width
Applies to: all visual and tactile media types | Accepts min/max prefixes: yes
Whereas the media feature width is the width of the viewport, device-width is the width of the screen.
device-width is often used to target devices such as mobiles and tablets. Consider the following example:
@media only screen and (min-device-width: 320px)
and (max-device-width: 480px)
With this query, all screen devices with a screen width ranging between 320px and 480px have the specified styles
applied to them. This range of widths applies to many mobile devices both in portrait and landscape orientations, but
not bigger devices such as tablets and desktop computers.
Unlike the viewport, the size of a screen obviously can't be changed.
device-height
Applies to: all visual and tactile media types | Accepts min/max prefixes: yes
device-height describes the height of a screen. As with the height media feature, it is not as commonly used
as width or device-width but shares similar purposes as those described for height .
orientation