a-look-at-the-new-css3-units-of-measure.md

title	authors	intro	types	categories	published	updated	status
A look at the new CSS3 units of measure	thebeebs	So if you have been developing for any length of t...	shorts	web html5at5	2012/02/13 12:00:00	2012/02/13 13:00:00	archived

So if you have been developing for any length of time then you are probably familiar with ‘em’, ‘%’and ‘px’ as units of measurements in CSS. As part of the CSS3 specification there are a few new  units of measurement that I think are worth casting an eye over.

• ‘ex’ This represents the height of a lowercase character in the elements font, it’s sometimes referred to as the x-height because in many cases it is equal to the height of the lower case x, it resents about half size of a font’s height. The usefulness of this measurement is questioned in this blog post.
• ‘ch’ width of the "0" glyph in the element's font. At first this might not appear to be that useful, but in monospace fonts it can be used to accurately measure text. Here is a real world use for this measurement.
• ‘rem’ font size of the root element. In practical terms the root element is the HTML element. This way you can set a font size on the HTML element and then use a rem to size a font relative to that element anywhere in the document. There is a nice blog post here detailing it’s real world use.
• ‘vw’ viewport's width – You can resize elements based upon the width of the viewport (the rectangular viewing region of the browser) that is currently viewing the website.  It’s use is discussed here.
• ‘vh’ viewport's height  - You can resize elements based upon the height of the viewport that is currently viewing the website. It’s use is discussed here.
• ‘vm’ minimum of the viewport's height and width – This tells you what is smaller out of either vw or vh. In the specification there is currently an issue which asks if this is still required. Since a developer could simply use the new min function instead. e.g min(1vh, 1vw);