Wednesday, November 01, 2006

Unit of Measurement

Below mentioned information will be useful for designers and developers which has been picked up from elementK's training files on CSS:

Unit of Measurement

pixels (px)
A standard screen measurement. One pixel equals one physical pixel on a computer screen, which varies with screen resolution. (For this reason, some consider pixels to be a relative unit of measurement.)

inches (in)
A standard English measurement. One inch is equal to 2.54 centimeters.

centimeters (cm)
A standard metric measurement. One centimeter is equal to almost 2/5 of an inch.

millimeters (mm)
A standard metric measurement. Ten millimeters are equal to one centimeter.

points (pt)
A standard print measurement. One point is equal to 1/72 of an inch. In reality, point values are not this precise on the Web, and vary according to the font face in use.

picas (pc)
A standard print measurement. One pica is equal to 12 points.

===========================

If you intend to use absolute units of measurement for any CSS property, pixels tend to be the most reliable across different browsers and operating systems. Pixels also make the most sense for the screen. Points and picas, for example, are units of print measurement that have no real meaning on a computer screen.
If you want your length values to scale from user to user, and from one output device to the next, use relative units of measurement. The following table lists the relative units of measurement in CSS.

Unit of Measurement

ems (em)
A standard print measurement. Ems are relative to the width of the uppercase M character of the parent element's font, or the inherited font size when applied to the font-size property.

x-height (ex)
A standard print measurement. The x-height is defined by the size of the lowercase x character of the parent element's font, or the size of the x character of the inherited font size when applied to the font-size property.

percent (%)
A fraction value based on the computed value of an inherited length.

No comments:

Post a Comment