HTML and CSS Reference
In-Depth Information
@media (min-width:1025px) and (max-width: 2560px) {
#content {
width: 960px;
font-size: 3vw;
}
}
In this example, the first ruleset is applied on small-resolution screens of entry-level and older smartphones
and phones in portrait orientation; the second ruleset is applied to smartphones in landscape orientation with
a resolution anywhere between 480px and 1024px; while the third ruleset is used on high-resolution tablets in
landscape orientation, as well as on ultrabooks, laptops, and desktop computers.
Browser-independent design with liquid layout is ideal in all cases where the design allows content positioning
in a way that it spans the entire page width according to the available space (expands or contracts as required
1
). Note
that high-resolution displays are often found on relatively small devices with very high pixel density such as modern
tablets where the font size has to be changed proportionally, otherwise the text becomes illegible.
Sizes and Proportions
Style sheet validity does not guarantee proper sizes and proportions. The selection of CSS units has a large impact on
the overall appearance of web page components, as well as the usability and readability of the content.
Lengths in Relative Units
The relative units of CSS (
em
and
%
), which are computed according to a feature of another element, should be used
for lengths. In Responsive Web Design, the font size is set proportionally to the viewport size, as discussed earlier
(
vw
,
vh
,
vmin
,
vmax
).
The absolute units such as inches, centimeters, points, and pica can be used only if the physical characteristics
of the target media are known. A typical example is a printing option of a web page where the default output for an
official document can be in 12pt Times New Roman with 2.5 cm margins on a standard-sized paper, such as the North
American letter paper (8.5×11˝) or standard A4 paper (210×297 mm, ISO 216 international standard [1]).
Combine Units Properly
The
em
unit can be used in CSS to provide scalable styles. It is a general unit for measuring lengths such as page
margins or element paddings. It allows developers to specify several CSS properties relative to the current font size.
Consequently, margins declared in this unit stay in proportion even if the user magnifies the font size.
To ease the calculation of font sizes expressed in
em
, user experience expert Richard Rutter introduced a
technique that applies a font size of 62.5 percent on the
body
element (Listing 13-2) [2].
Listing 13-2.
The Rutter Method
body {
font-size: 62.5%;
}
1
Liquid layout works not only for different resolutions, but also for resized windows on the same resolution.
Search WWH ::
Custom Search