For the last couple of years I've been using CSS stylesheets pretty heavily in my app designs. Typically, I'd define elements in the CSS in pixel (px) units.
However, one thing that's become an issue when designing for different size screens (e.g. ipod/ipad) is the font size. Not only should you make sure the font is appropriate, but you should also take a look at other layout content including margins and images.
There's a couple of ways of addressing this problem, but perhaps the easiest is to take advantage of the "em" and "ex" ways of defining relative sizes in CSS.
According to about 30 seconds of Google research, Em, back in the hardcopy print days, was the width of the "M" character for a given font. Ex was the height of the "X" character. So, if one wants to define a margin that scales horizontally relative to the given font, then define the margin in terms of "Em".
So using em units works great for margins. It also works great for relative fonts. And it even works for specifying image sizes.
I could write my own example, but here's a good one that's already out there
No comments:
Post a Comment