Exploring CSS units.
In CSS, there are quite several units and all of these units are classified into either absolute units or relative units.
ABSOLUTE UNITS.
An absolute unit is a unit of measurement in CSS that doesn’t change. This simply means that at every point in time, an absolute unit will always be fixed. Examples of absolute units include pixels, points, inches, millimetres, centimetres and so on but from the variety of options we have, the most commonly used absolute unit is “Pixels”.
A pixel is 1/96th of 1 inch and what this means is that if one inch were to be divided into 96 equal fractions, one pixel would be equivalent to just one of those fractions.
Saying that absolute units have a fixed value doesn’t mean they are not exactly useful. It is just important to point out that feature to be aware of the potential issues that could arise when using absolute units in a responsive design.
An instance that would make perfect sense to consistently make use of absolute units would be when applying styles to the width of the border of an element.
p {
border-width: 2px;
}
RELATIVE UNITS.
A relative unit is a unit of measurement that is relative to something else which could be the font size of the text or the size of the viewport.
N.B: The size of the viewport refers to the visible portion of a webpage and this varies depending on the device in use.
Relative units remain an important factor to consider when creating responsive designs that need to adapt to different screen sizes and devices. Mentioning a few types of the relative unit to stick to the most frequently used ones, they include:
Em: This is a relative unit that is based on the font size of the parent element I.e one “em” of an element is equal to the font size of the parent element. In simpler terms, when you set the font size of an element in “em”, the font size of that element adjusts relatively to the font size of the parent element. For example, if the font size of the parent element is 16 pixels and you set the font size of the child element to be 2em, the font size of the child element will be 32 pixels (2 x 16).
Things could get messed up real quick with the “em” unit when we begin to have more elements embedded inside each other and it could become quite a task to keep track of the “em” values.
Rem: This is another relative unit that is very similar to the “em” unit but it is based on the font size of the root element (the <html> element) instead of the parent element. To further explain, it means that at every point in the design, 2rem will always remain 2rem as long as the font size of the root element remains constant, unlike the “em” unit with which the parent element will not have a constant value. This makes it easier to keep track of the values and create consistent designs across multiple devices.
Vw (viewport width) and Vh (viewport height): These are relative units that are based on the size of the viewport. “Vw” represents 1/100th of the viewport width while “Vh” represents 1/100th of the viewport height. For instance, if the viewport height is 1000 pixels, 10vh would be equal to 100 pixels.
% (per cent): This is a relative unit that is based on the font size of the parent element. This simply means that when you use the per cent unit for your CSS property values, the value is calculated as a percentage of the size of the parent element. For example, if you have a div element contained in a parent element with a width of 500 pixels, and you set the width of the child div element to be 50%, the width of the child div element will eventually turn out to be 250 pixels (50% of 500).
In summary, absolute units are fixed units of measurement that do not depend on any external factors and also do not change based on the device in use or screen size while relative units on the other hand are more or less like reference values that adjust their sizes accordingly to screen sizes and font size of parent elements.