Until now whenever we have specified font sizes, margin, padding, border etc. we have done it through pixels or percentage. 

This is because the easiest way to imagine a size, at least for those of us who are working all day on a computer, is the size of a monitor pixel.

We will see that there are several units of measurement to indicate sizes and that some are more suitable for some situations than others.

We have the following units of measure:

px (pixels)
rem (font size relative to document root element)
em (default font height)
ex (height of lowercase letter x)
in (inches)
cm (centimeters)
mm (millimeters)
pt (points, 1 point is the same as 1/72 inch)
pc (spades, 1 pc is the same as 12 points)
% (percentage)

Units with relative lengths

Of all the measures stated at the beginning, the most used units with relative lengths are:

1. rem
2. em
3. %

Relative length units scale better on phones, tablets, and monitors.

For example, the Bootstrap 4 CSS framework massively uses the "rem" unit of measure.

If we open its source code, we will see that more than 600 properties are initialized using this measurement.

Meaning of common measurement units

• px : pixels - we all know them - are the unit of measurement par excellence for screens; they refer to the real physical pixel of the screen and have a fixed size: try to conceive them as the pieces of a mosaic that form the image you see on the screen.
   
• percentages : the units of measurement expressed as a percentage refer to the value of the parent property of that particular element.
  
  What does it mean?
  If we have a red <div> inside a green <div>, and the red one has a unit of measurement for its "width" property expressed as a percentage (for example: 50%), our div red won't be 50% of the screen, but it will occupy exactly 50% of the parent (that is, the green div.)
  
  The unit of measure percent is a less stable unit than the pixel: it's not fixed, it's flexible. This means that as the parent's size changes, of course, its size will change.
  Let's take a closer look: if the father in question is the body itself, switching from a desktop device to a mobile one - like your mobile phone - will reduce the screen size. In that case, 50% of the red div analyzed above, having the body as parent, will not always correspond to the same number of pixels, since the screen will be smaller.

• em : is a unit of measurement relative to the font size of the parent of our element.
  Suppose we have assigned a generic font-size of 20px to the texts contained in our header; if we assign a font-size of 2em to a paragraph contained in the header, the text of that paragraph will measure 40px.
   
• rem : works in a similar way to em, but unlike the latter, the rem is a unit of measurement based on the size of the fonts present in the root, i.e. the "root" of our html document. For many browsers this size corresponds to 16px, but if we wanted to change it we would just need to assign the desired font-size to the body. We could therefore say that a rem is an em whose father is the body.
   
• viewport : the viewport is literally the visible size of our web page, which changes as the device for using the site changes. That is to say that if we browse a website from a mobile phone, tablet or PC, the viewport will be different for each medium.
  That said, there are two units of measure for the viewport, and they are vh and vw.
  “ Vh” stands for “viewport height” - the height of our document - and “vw ” stands for “viewport width ” - its width - and their values ​​correspond to a percentage of the viewport.
  For example, if the value of an assigned element's dimension property is “75vh” the encumbrance of my element will occupy 75% of the entire viewport height.