This will be just a general answer just as a guideline, not as absolute truth.
And allow me to make an unofficial category list based on the Mozilla list.
When designing things you have two starting points, your overall "canvas". Your canvas could be a small screen on an old brick cellphone, or the facade of a building if you want, but you have some boundaries.
On printed media, these boundaries are well defined. Letter-size, A4, 2m long, etc.
On electronic devices, we have a problem tho. Historically display devices did not declare the pixel density at all. You could not have a monitor at all, and the OS would not notice it. It is only recently that devices, especially all in one, including cellphones that, as they have attached the display, they can declare the pixel density to the OS. Ony here we can have a direct conversion to absolute units.
Absolute unit => Pixel density => Specific size
And you have individual elements, the main one is text, but you have some elements related to it, probably a button or some other input elements.
1. Absolute units
1.1 Common lenght units: cm, mm, in
Specifically when you are sending something to be printed. This unit is used the same as you would use it in a word processor. To measure margins, column widths, or the size of some graphics.
1.2 Tipography related unit: pt
This is the common way to measure the size of typography. It does not measure specific chars, but the overall height of the family. It is mainly used on printed media.
1.3 No one use them: pc
Sorry.
1.4 WTF: Q
This is an aberration of the International System of Units. The SI is, with some exceptions, decimal. https://en.wikipedia.org/wiki/International_System_of_Units#Prefixes the Q prefix for ANY length unit, does not exist.
1.5 Px
There is much to unpack here. I will probably edit this part several times and many of my comments will be subject to some controversy.
Px is NOT an absolute unit. It is relative to the pixels displayed by a device. Back in the days where we had CRT monitors, there was a slight correlation between monitor size and resolution. We somehow have still that correlation on general use desktop monitors. In those days the myth of 72PPI for images for electronic devices was born. (This needs a more comprehensive historical review)
One problem was generated when the so-called retina device arrived. The pixels were too small to be used as a unit, for example, text, so a conversion factor needed to be applied. That is when the 2x or 3x conversion factor for images was introduced.
Px so, needed to be somehow detached from the display units, and a common pixel density, defined by Windows of 96 PPI on screens is applied as a base for pixel size. But still, Px is not, and can not be absolute.
One example is an image on a projector. If you put it further or closer, the unit will still be Px, but the physical size will change.
I will call this Px unit as CSSpx, because the pixel is in reality a raster image-related unit. A pixel has no physical dimension, it is in reality a spot on a matrix of values.
Px It is also used as a display unit, but my neologism for this is "dixel" (display-unit) and on capture devices, like a camera, a term used is "sensel". They are not the same.
2. Relative sizes
2.1 Small to big: em, rem, lh
These are again, typography-related. But relative to what? If you do not define the base unit first, they are related to the default size unit of fonts, defined by the font itself and the device.
Even here we have more relative than relative.
rem will relate to the base size. em will relate to the parent container. lh to the element itself.
2.2 No one use them: ex, ch
Probably some specialized usage like data display.
2.3 Forgotten ones:
font-size: xx-small | x-small | small | medium | large | x-large | xx-large
font-size: smaller | larger
You let the device decide, without being specific.
2.4 Big to small: Viewport related
Normally you can use these to define overall sections. For example, you could have a background texture on a section. IF you want it to cover the full screen, but as soon as the user scrolls down a bit, you use vh 100. If you want them to know there is more than just the "hero" section, use vh 90 for example.
I am mentioning backgrounds because you do not really care if the image is shown complete or cropped. You only use this for overall sections, because if you use them on individual elements you have the risk of overlapping things.
2.5 Percentages
You can use big to small or small to big. You can use them to define font size related to the base size of the font, similarly to rem or em. They can be equivalent:
font-size: 100% = 1em.
Or as a fraction of the space, the parent element leaves you. This is for block-related stuff. Paragraphs, images, diagrams.
There are many units, but you do not need to use them all, but you need to use them logically, if you need them. You need to "preview" the possible scenarios of your elements.
One common case is to fit an image, you could use with 100%, height 100%. Yes, it will fit surely. But could be deformed, or too small, or humungous depending on the user's device.
I will probably edit later the answer.
