HTML and CSS Reference
In-Depth Information
Figure 17-8.
The high-resolution icons are much crisper
Case Study: Responsive Layout
The two-column layout in the Mediterranean Destinations example page that's been used in several chapters
begins to look too compressed at widths of less than
600px
, so that makes a sensible break point for a media
query (see “What Sizes Should I Design For?” earlier in this chapter). To conclude this chapter with a practical
example of media queries, I'll show you how to adapt the existing styles to make it a responsive layout.
eXercISe: reSpONSIVe LaYOUt
The purpose of this exercise is to demonstrate the basic principles of serving different styles to devices
depending on the available screen width. it adapts an existing desktop design that uses percentage widths
and sets a maximum width of
1000px
. For simplicity, only essential changes are made to the design. A
production design would be more complex, and should be created from scratch optimizing the content for
mobile devices first.
use as your starting point horizontal.html and styles/horizontal.css in the ch17 folder. The finished files are
horizontal_end.html, and basic_end.css and twocol_end.css in the styles folder. The web page also has a
print style sheet attached, but no changes are made to it.
1.
Make two copies of horizontal.css, and save them in the styles folder as basic.css
and twocol.css.
2.
in the
<head>
of the web page, add the viewport
<meta>
tag immediately after
the
<title>
element, and set
width
to
device-width
:
<meta name="viewport" content="width=device-width">
