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
landscape
orientation
styles implemented
when the screen is
in landscape
orientation
◗
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.
