There are a variety of sizing units available in HTML and CSS. Each one has advantages and disadvantages.
The following relative size units can be used in most browsers.
- em: Relative to font-size of current element
- ex: Relative to height of current font.
- ch: Relative to width of the 0.
- rem: Relative to font-size of root element.
- vw: Based on the percent of viewport width. 1vw is 1% of current viewport width.
- vh: Based on the percent of viewport height. 1vh is 1% of current viewport height.
- vmin: Based on the smallest viewport dimension.
- vmax: Based on the largest viewport dimension.
- %: Relative to the parent object.
The following absolute size units can be used in most browsers. These will NOT recommended as they will not resize based on device. Pixels are a special case.
- cm: Centimeters
- mm: Millimeters
- in: Inches
- px: Pixels (1 pixel = 1/96 inch). Pixels vary by device. A high DPI device may have multiple device pixels for a 1 pixel measurement.
- pt: Points (1 point = 1/72 inch)
- pc: Picas (1pc = 12 pt)
Common Usage
In web design, we normally see pixels, percents, ems and rems. VW and VH are becoming more common. Pixels have long been the standard; however, this is not good practice for responsive design. The other measurement units are better.
More Information
Please see w3 schools for more details.
