HTML and CSS Reference
In-Depth Information
Designing for Landscape Orientation
To define styles under landscape orientation, you use the same @media rule, setting the
orientation to landscape . You'll add this @media rule now.
To create the landscape style rules:
1. Return to the mobile.css file in your text editor. At the end of the file, insert the
following code:
/* Mobile styles under landscape orientation */
@media screen and (orientation: landscape) {
2. Save your changes to the file.
3. Copy the code from the landscape.txt file and paste it within the @media rule for
landscape orientation. See Figure 8-59.
figure 8-59
inserting an @media rule for screens in landscape orientation
media query for
styles implemented
when the screen is
in landscape
4. Save your changes to the file, and then reload treebook.htm in your browser win-
dow or mobile device. Resize the browser window so that its width is 500 pixels
or less, and the width of the browser window is greater than the height. If you
are using a mobile device or emulator, flip the device into landscape orientation.
Figure 8-60 shows the layout of the page under landscape orientation.
Search WWH ::

Custom Search