The CSS3 units

You're probably familiar with the typical CSS units such as px (pixel), pt (point), and em (font-size). There are others that are used more often in print situations, such as in (inch) and cm (centimeter). You should also be familiar with specifying percentages so that your content can resize appropriately.

Unfortunately, these units, though very well supported, aren't as flexible as modern application development may require. Thankfully, CSS3 has added several new units that we can use to our advantage, and they are becoming reasonably well supported on mobile platforms.

The em unit indicates font-size for a specific element. If an element's font-size is 20px, then 1em is also 20px. This has been useful in the past, because it is easy to adjust the size of elements based upon the font-size. The rem unit is an extension of this unit. rem is short for root em and it allows us to specify a root em size that is consistent throughout the document. That is, if we...