HTML and CSS Reference
In-Depth Information
to three times that, which results in a computed size of 30px. The
<p>
is set to 1.4
times the size of the base font, or 14px.
The trouble starts when you try to resize children of those elements. If you
wanted to, say, size your
<code>
element at 11px, how would you do that with
ems? Well, 1.1em wouldn't work, because it would be 1.1em of 14px (the size of its
parent element). The actual value you need is 11/14 = 0.786em. Extrapolate this
to more complicated and precise designs, and you're looking at a whole load of
complicated math and hair pulling.
Rems make text sizing a lot easier. If you instead used rems for these text sizes,
everything would be relative to the
font-size
on the
<html>
. So getting 11px code
font would be a matter of using the following:
code {
: ;
}
Ta b l e 1 . 2
shows the current state of browser support for rem units.
TAB LE 1.2
Browser Support Matrix for Rem Units
BROWSER REM UNITS
Opera
Since 11.6
Firefox
Since 3.6
Safari
Since 5.0
Chrome
Since 6.0
Internet Explorer
Since 9
iOS
Since 4.0
Android
Since 2.1
Mobile Chrome
Since beta
Opera Mobile
12
Opera Mini
No
