A Unit determines the size of a property you are setting for an element or its content. It can be Relative or Absolute.
Whether to use Relative or Absolute Units is determined by:
- 1.Whether you want what you are styling to scale when the viewport size changes.
- 2.What you want it to scale relative to.
An Absolute Unit stays the same size even if the parent element or window size changes. If you change between screen sizes, an Absolute Unit will always stay the same size.
It is important to choose the most appropriate option for the property you are targetting.
A Relative Unit scales relative to the parent or window size. This makes it useful for styling responsive sites.
% (percentage), may be more appropriate for layout-related properties like width than for font-size.
EM (Relative to the current font size of the element), can be used when you want the font size of a child element to be related to the size of its parent’s font size.
REM (relative to the font size of the root element), can be used when you want the font size to be related to the size of the root element's font size. This is commonly used for headers because they should all be the same size regardless of the parent container.
VW (relative to the width of the viewpoint) can be used for a section with text as it should be relative to the viewport/window.
VH (relative to the height of the viewpoint) can be used for your landing page because it should always be the relative in height to the viewport/window.
CH (number of characters) can be used when you have a mono-spaced font in which the characters are always the same width and you only have limited space.