rem | root em, used when you want to size component relative to the root em 16px size |
em | relative version of rem (em=emphasis), used when you want tor size component relative to its parent’s em size |
% | relative to the width/height of its parent component, mostly used in flex/grid container sizing |
ch | size relative to the character width of character 0, mostly used when defining the max character length |
vw/vh | relative to the width and height of the viewport, aka the sceen width and height |
px | absolute unit of measurement used to specify sizes, when no zoom ratio applied, 1px is one physical pixel on the user’s device. |