HTML and CSS Reference
In-Depth Information
The long and short of it is that using pixels as the unit of measurement should result in roughly the same
size, regardless of the physical pixel density of the screen.
Many designers, particularly those who come from a print background, instinctively use points to specify
font sizes. A common assumption is that pixels and points are interchangeable. However, both CSS2.1 and CSS3
define a pixel as being equal to 0.75pt.
Length Units in CSS3
Table 3-2 lists the new length units introduced in CSS3. They are all classified as relative units.
Table 3-2. CSS3 Length Units
Relative to
The width of the character 0 (zero) in the current font
The font size of the root element
The viewport's width
The viewport's height
The viewport's width or height, whichever is smaller
The viewport's width or height, whichever is larger
At the time of this writing, the only unit in Table 3-2 with widespread support is rem . It has been available
since Firefox 3.6, Chrome 6, Safari 5, IE 9, Android 2.1, and iOS 4.0. It's very similar to the em unit in that it's
equivalent to the height of a font. The difference is that it remains relative to the font size of the root element—in
other words, the page's default font size. This avoids the multiplier effect that can result in ever-shrinking text
when specifying font sizes in em units. With rem units, the scaling is always proportionate to the same value.
The following style rule in rem.html produces the same output as Figure 3-2 in browsers that support the rem
ul {
font-size: 0.75rem;
he vw , vh , vmin , and vmax units are similar to percentages in that 100vw equals the full width of the viewport,
100vh equals the full height, and 100vmin equals the shorter of the two. When the height or width of the viewport
is resized, lengths specified with these units are scaled proportionately. IE 9 implemented an early draft of the
specification, in which vmin was called vm . IE 10 uses vmin . Chrome 20 and Safari 6 also support vw , vh , and vmin .
he W3C added vmax to the specification as an afterthought. At the time of this writing, it's not supported by any
Firefox is currently the only browser that supports ch correctly.
Using the calc() Function to Compute Length Values
The situation frequently arises in fluid or flexible layouts where you want to combine absolute values with relative
ones. For example, you might want an element to fill 70 percent of the horizontal space, but to have a 10-pixel
margin on either side. Because you have no idea how wide the browser viewport will be, it's impossible to know
how much horizontal space remains alongside. The CSS3 calc() function is designed to solve such problems.
Search WWH ::

Custom Search