HTML and CSS Reference
In-Depth Information
Figure 3-2.
The nested lists now use the same font size as the top level list
You can examine the HTML and CSS for
Figures 3-1
and
3-2
in shrinking.html and not_shrinking.html in the
ch03 folder.
■
Note
The CSS3
rem
unit described later in this chapter offers a much simpler solution to this problem.
he
ex
unit is meant to be equivalent to the height of a lowercase X in the current font. However, most
browsers treat this unit as half an
em
. It's rarely used.
Of the absolute units, pixels are the only ones that should be used for onscreen display. The other units are
intended for use in print style sheets (see
Chapter 16
).
Originally, pixels were classified as relative units because their size was considered to be relative to the
viewing device. However, changes in technology resulted in the need to redefine how pixels are interpreted, as
explained in the sidebar “Physical and CSS Pixels.”
physiCal and Css pixels
in digital imaging, a pixel is the smallest element of a picture that can be represented or controlled (the term
is a contraction of “picture” and “element”). over the years, screen resolutions have improved, cramming
more and more dots into the same physical space. As a result, physical pixels have become smaller and
smaller. one of the most dramatic changes was the development of the retina display for the iPhone and
iPad, which squeezes four pixels into the space where there had previously been only one.
if browsers interpreted pixel units of measurement literally, you would need a magnifying glass to view web
pages on high pixel-density screens. fortunately, that doesn't happen. The CSS specification defines what
it calls a
reference pixel
, which aims to standardize how pixel values are displayed when viewed at arm's
length. At a distance of 28 inches (71 cm), a reference pixel (or
CSS pixel
, as it's more commonly called) is
equivalent to 1/96 inch (0.26 mm). When displayed on a device that's intended to be viewed at a greater
distance—a projector, for example—the device is expected to scale up pixel measurements proportionately.
