Forum Moderators: not2easy
There are ways, however, to get fairly close. One method is to set the base font size (the font-size property on the <body> element) to around 62.8%. This makes the base font, or 1.0em, approximately equal to 10px. It's not exact, and changes from font to font, but generally speaking it's pretty accurate. With that font setting in the body, you can use EMs as px equivalents like so...
1.0em = 10px
1.1em = 11px
1.2em = 12px
2.0em = 20px
5.0em = 50px
etc.
There are a few caveats, however, the major one being that it isn't a precise conversion so elements that must be EXACTLY Xpx are unlikely to be so. The other big danger is that setting the base font this small makes IE text resizing somewhat problematic, as this 62.8% size becomes the "meduim" setting for IE. Since IE only allows two font-size increases ("large" and "larger"), those who need larger fonts may not get a big enough size to suit their needs. Likewise, sizing down to "small" or "smaller" makes text virtually unreadable.
But otherwise, it's a very practical technique.
cEM
I had a page bookmarked that gives you a comparison on this, if I can find it I will sticky it to you.
....
to help clarify difference between em and pixels...
the em is a unit of measure that is based on the users default pixel font size.
~ This default in most but not all modern browsers is set (when shipped) to 16px.
1em = the users default font-size if no other explicit, pixel font-sizes are set via CSS
Users can and do change their preferences, and Macs ship with a 14px default I think?
In CSS by setting the font size on the body to 100%, this is only to overcome an IE bug ~ it can't resize em's properly without this trick. it doesn't change the user default.
>>re: The 100.01%
recommended by some as a setting on the <body> element this is to over both the IE Bug mentioned above and also a bug that some versions of Opera had.. whether or not that still exists I don't know but essentially it won't do any harm as 16px x 100.01% 16.0016px ~ still 16.
To use conversions to approximate ems to pixels has too many variables to be an exact science.
~ divide the ems by the user default px. hmm..
So when we talk about these conversions, we are only approximating it based on the majority consensus of browsers shipping with 16px default and the user not changing this. The magic 62.5% is based on this consensus too.. without the "magic" the sums are just a little harder ;)
Using the consensus 16px default:
If and when you want to make your font size approximately = 13px using ems you would need to
divide 13 by 16 = 0.8125em
or a div width equivalent to 135px the sum is
divide 135 by 16 = 8.4375em
but continually dividing by 16 is a little harder than 10! ;)
The recommended trick as cEM says of setting the body size to 62.5% is only to make the math easier throughout your stylesheet it doesn't actually change the fact that an em is relative to a user setting and that you don't know the default..
So if you do assume a 16px default and use this 62.5% trick to be able to use the "divide by 10" method to do the maths.
You are making the assumption that:
base = 16px and that muliplied by 62.5% = 10
the em sizes then become relative to the new override settings
10px = 1em
13px = 1.3em
135px = 13.5em
However in a Mac with default 14px your assumption produces
base = 14px x 62.5% = 8.75
so:
1em = 1 x 8.75 = 9px
1.3em = 1.3 x 8.75 = 11px
13.5em = 13.5 x 8.75 = 118px
and if a user has their default set to say 18px :
base = 18px x 62.5% = 11.25
so:
1em = 1 x 11.25 = 11px
1.3em = 1.3 x 11.25 = 14-15px
13.5em = 13.5 x 11.25 = 152px
so you see there is no direct correlation it's a relative value, relative to font-size however it's set ~ explicitly or by default ~ no matter how you actually do the sums it will not often convert to an exact pixel value.. especially seeing as browsers round up/down differently too
exception is you set the base/body font-size to an explicit pixel value then use em's throughout (so you know what your sums are), why we don't do that is then IE won't resize the text if puely pixels are used and using em's for fluidity becomes a bit pointless anyway, in which you may as well avoid ems and the sums and just set everything in pixels :)
This is the whole thoery behind providing elastic layouts.. if a user has their font-size set bigger or smaller for whatever reasons then the em sized design will scale according to their preferences not just the designers viewport or being fixed..
In general though if you have no settings for your body font-size (either percentage or pixel}
the em width of an element is calculated on the computed or explicit font-size of that element
e.g.
div {
font-size: 20px;
width: 10em;
background: #eee;
}
will produce an element which is 200px wide 1em being explicitly equal to 20px;
but
div {
width: 10em;
background: #eee;
}
will produce a div that is 10 x the users default
Remember too that font-size is inherited so if you set body font-size: to 16px; then you have declared a font-size: for your element or one of it's ancestors the em width will be based on the element or its nearest ancestor..
e.g.
body {font-size: 16px;}
#menu {font-size: 10px;}
#menu div {width: 10em; background: #eee;}<body>
<div id="menu">
<div>....</div>
</div>
The internal div will be 100px wide, based on it's nearest ancestor with an explicit font size set.. ~ <div id="menu> in this case
Suzy
