HTML and CSS Reference
In-Depth Information
As an example, consider the following markup fragment. It will have the result shown
in Figure 5 .
<p> This paragraph has the same font size as the root element thanks to inheritance.</p>
<div style="font-size: 30px; background: silver;">
<p style="font-size: 1em;">This paragraph has the same font size as its parent
element.</p>
<p style="font-size: 1rem;">This paragraph has the same font size as the root
element.</p>
</div>
Figure 5. ems versus rems
Basically, rem acts as a reset for font size: no matter what relative font sizing has hap-
pened to the ancestors of an element, giving it font-size: 1rem; will put it right back
where the root element is set. This will usually be the user's default font size, unless of
course you (or the user) have set the root element to a specific font size.
For example, given this declaration, 1rem will always be equivalent to 13px :
html {font-size: 13px;}
However, given this declaration, 1rem will always be equivalent to three-quarters the
user's default font size:
html {font-size: 75%;}
In this case, if the user's default is 16 pixels, then 1rem will equal 12px . If the user has
actually set their default to 12 pixels—a few people do this—then 1rem will equal 9px ;
if the default setting is 20 pixels, then 1rem equals 15px . And so on.
Of course, you are not restricted to the value 1rem . Any real number can be used, just
as with the em unit, so you can do fun things like set all of your headings to be multiples
of the root element's font size:
h1 {font-size: 2rem;}
h2 {font-size: 1.75rem;}
h3 {font-size: 1.4rem;}
h4 {font-size: 1.1rem;}
h5 {font-size: 1rem;}
h6 {font-size: 0.8rem;}
As of mid-2012, support for rem was fairly widespread, missing only in
older versions of browsers that could still be hanging around.
 
Search WWH ::




Custom Search