CSS - units
In this article, we would like to explain CSS units.
In CSS, there are two main types of units: relative units and absolute.
Relative units are units based on other length measurements. They allow you to specify lengths as a multiple of some other value, rather than as an absolute value.
Absolute units, on the other hand, correspond to physical lengths. They allow you to specify lengths in terms of actual physical distances, such as inches, centimeters, or millimeters.
Some units, like px and in, are based on the resolution of the screen or device, while others, like em and rem, are based on font sizes. Additionally, some units, like vh and vw, are based on the size of the viewport (the full size of the browser window).
| Unit | Description |
|---|---|
em | represents the font size of the element |
rem | represents the font size of the root element (typically the <html> element) |
% | represents a percentage of the parent element's size |
vh | represents a percentage of the viewport's height (the full size of the browser window) |
vw | represents a percentage of the viewport's width (the full size of the browser window) |
vmin | represents a percentage of the viewport's smaller dimension (either the height or the width) |
vmax | represents a percentage of the viewport's larger dimension (either the height or the width) |
ex | represents a value relative to the x-height of the current font |
ch | represents a value relative to the width of the 0 (zero) |
| Unit | Description |
|---|---|
px | pixels, which correspond to actual physical pixels on the screen |
in | inches |
cm | centimeters |
mm | millimeters |
pt | points (1/72 of an inch) |
pc | picas (1/6 of an inch) |
Note:
Absolute units are not recommended to use in web design because they do not scale well across different devices with different screen sizes and resolutions.
