For the iPad specifically, there is also a media query property called
orientation. The value can be either landscape (horizontal orientation) or
portrait (vertical orientation).
1 @media screen and (orientation: landscape) {(^2) .iPadLandscape {
(^3) width: 30%;
(^4) float: right;
(^5) }
6 }
1 @media screen and (orientation: portrait) {
(^2) .iPadPortrait {
(^3) clear: both;
(^4) }
5 }
Unfortunately, this property works only on the iPad. When determining the
orientation for the iPhone and other devices, the use of max-device-
width and min-device-width should do the trick.
There are also many media queries that make sense when combined. For
example, the min-width and max-width media queries are combined all
the time to set a style specific to a certain range.
1 @media screen and (min-width: 800px) and (max-width: 1200px) {
(^2) .classForaMediumScreen {
(^3) background: #cc0000;
(^4) width: 30%;
(^5) float: right;
(^6) }
7 }