ptg16476052Units of Measure 1678
TABLE 8.1 Length Units in CSS
Unit Measurement
em Relative; height of the element’s font
ex Relative; height of x character in the element’s font
px Relative; pixels, which are relative to the viewing device
in Absolute; inches
cm Absolute; centimeters
mm Absolute; millimeters
pt Absolute; points
pc Absolute; picas
rem Relative; height of the root element’s font (new in CSS3)
vh Relative; percent of the viewport height (new in CSS3)
vw Relative; percent of the viewport width (new in CSS3)
The absolute measurements seem great, except that an inch isn’t really an inch when it
comes to measuring things on a screen. Given the variety of browser sizes and resolu-
tions supported, the browser doesn’t really know how to figure out what an inch is. For
example, you might have a laptop with a 15-inch display running at 1440 by 900 pixels.
I might have a 23-inch CRT running at roughly the same resolution. If the browser thinks
that one inch is 96 pixels, a headline set to 1in may appear as less than an inch on your
monitor or more than an inch on mine. Using relative units is safer.
In this lesson, I use one length unit: px. It’s my favorite for sizing most things. However,
other relative units can also be useful. For example, if you want paragraphs on your page
to appear as double spaced, you can specify them like this :
p { line-height: 2em; }
CSS3 also brings in three new relative units that are very useful: rem, vh, and vw. The
rem unit acts like the em unit; it is relative to the font size. But rather than being relative
to the current element’s font size, it’s relative to the base font size for the whole page.
This means that you can set values that don’t combine with each other. Many designers
did not like the em unit because it would combine and result in font sizes that were much
larger or smaller than they expected. rem acts the way most designers expect.
The other two new units are vh and vw. These are relative to the viewport window. This is
particularly useful if you are designing pages to look good on mobile and smaller screen