CSS: Units

There are two types of Units are in CSS

1. Absolute
2. Relative

Absolute

• Absolute units are those who have precise and fixed size to the element.
• Examples of such units are: mm, cm, in, px, pc, Q, pt
• mostly px is used in web design

Relative

• Those units that are relative to size of font size or the view port size
• Examples of such units are: vh, em, dvh, ch, vw, vmax, dvw, rem, vmin, ex
• Out of all of this only four of them is mostly used : em, rem, px, ch, vh.

Let’s understand them one by one.

1. px

• In Monitor Screen : 1080p , 2.9cm = 96px while In Moile Screen: 1440p , 1.4cm = 96px and same if we find it on tv screen or other devices, 96px will be found out of different cm.
• px unit is a measurement of length that is relative to the expected viewing distance of the device being used.

2. em and rem unit

• 1em → takes the size relative to the size of it’s parent component. for example if parent has a size of 32px . Then the child inside it having 1rem shows the size of 32px

As these four font-sizes are depending on each other. which makes it more difficult.

• em is an amazing units to use for padding, margins and widths.

3. rem

• rem works instead of relative to the font-size of parent element it will be relative to the font-size of root element.

4. %, vh, vw

→ % (percentages)

• Percentages are always relative to the parent.

→ 4.2 vh , vw(viewport)

• vh, vw are relative to the view port width.
• used for header width and height

5. ch

• It measures of the character width on your phone
• used in paragraph