Basics of the CSS3 Units of Measure
There are many ways to specify a value when working with CSS3. For example, you can simply say that the browser should use a large font (where medium is the default size). You can also tell the browser to compute a size based on the browser’s configuration.
Relative measurements make it possible for the browser to adjust the content presentation to match the size of the device displaying it, but using relative measurements also means that the user may not see the content as you originally wanted to present it.
In rare cases, using relative measurements can actually make the content unusable because the browser doesn’t know how to use the relative measurements to present the content correctly.
Absolute measurements have the advantage of allowing precise placement of content onscreen and making that content a specific size or giving the content a precise appearance. However, use absolute measurements only when you’re certain about the user’s configuration.
For example, you could use absolute measurements when creating an application that’s for internal use within your organization and the organization has mandated device configurations.
When creating absolute measurements, and some relative measurements, you need to use a unit of measure that the browser will understand. Here are the standardized units of measure that every browser will understand, along with a description of that measurement:
|%||Percent||Relative||A percentage of a particular element. For example, a table column can consume a percentage of the space allocated for the entire table’s width.|
|in||Inch||Absolute||The number of screen or printed inches to use to display an element. The number of pixels in an inch varies according to device and device configuration.|
|cm||Centimeter||Absolute||The number of screen or printed centimeters to use to display an element. The number of pixels in an centimeter varies according to device and device configuration.|
|mm||Millimeter||Absolute||The number of screen or printed millimeters to use to display an element. The number of pixels in an millimeter varies according to device and device configuration.|
|em||Em||Relative||An em is computed based on the current font size. The default size for most desktop browsers is 16 px = 1 em. However, someone might configure the browser to use a smaller or larger default font.|
|ex||Ex||Relative||A counterpart to the em, the ex is the computed x-height of a font, rather than the full height of the font. Otherwise exs work the same as ems.|
|pt||Point||Absolute||Each point is approximately 1/72-inch.|
|pc||Pica||Absolute||Each pica is equal to twelve points.|
|px||Pixel||Relative||Specifies an individual dot on the screen. This is a relative measurement because it takes into account the variable number of pixels used by each device over a specific measurement (normally an inch or centimeter). Many developers use pixels when good presentation control is needed, but some flexibility in adapting to a particular platform is desired.|