HTML and CSS Reference
In-Depth Information
queries to further optimize the design for as large a segment of your users
as possible.
•
Liquid layouts:
Monitor sizes and screen resolutions cover a much
larger range than they used to, and mobile devices like the iPhone and
iPad let the user switch between portrait and landscape mode,
changing their viewport width on the fly. Liquid layouts, also called fluid,
change in width based on the user's viewport (eg, window) width so that
the entire design always fits on the screen without horizontal scrollbars
appearing. The
min-width
and
max-width
properties and/or media
queries can and should be used to keep the design from getting too
stretched out or too squished at extreme dimensions.
•
Elastic layouts:
If you want to optimize for a particular number of text
characters per line, you can use an elastic layout, which changes in
width based on the user's text size. Again, you can use
min-
and
max-
width
and/or media queries to limit the degree of elasticity.
•
Resolution-dependent layouts:
This type of layout, also called adaptive
layout, is similar to media queries, but uses JavaScript to switch
between di
"
erent style sheets and rearrange boxes to accommodate
di
"
erent viewport widths.
Layout Grids
Aids in: modularity, e
"
ciency
Designing on a grid of (usually invisible) consistent horizontal and vertical
lines is not new — it goes back for centuries — but its application to web
design has gained in popularity in recent years. And for good reason: a
