After way too long, I'm finally starting to leverage the "em" unit of measurement in my CSS. This is, of course, a best practice I've been hearing about for years, but never fully got.
Well, I'm on my way. These two articles gave me the details I needed:
http://www.informit.com/articles/article.aspx?p=397663
I find there were two mind bending aspects to this:
(1) Changing the font size of a tag results in changing the definition of 1 `em' and therfore, all other measurements. Tweak font size, and your padding changes. Spooky.
(2) The size of an em is calculated by combining all the modifications your parent nodes have made to it. So, I find myself thinking: 1em = 10px in the body tage, 1em = 16px in the #page tag, 1em = 11px in the #menu tag, ...
This is going to take some practice, but the resulting fluid layout is just too cool not to take advantage of.
Besides, there's something cool about starting off a style sheet with the magical incantation:
body { font-size: 62.5%; }
--Ben
No comments:
Post a Comment