TL;DR
Font Size : rem
Width : % in combination with max-width, ch
Height : %, rem, vh
Padding/ Margin : em, rem
Media Queries : em
Shadow, Border and Other Small Things : px
Info
- Avoid setting height on elements, but if it absolutely necessary use it along with min-height
- Be careful when using viewport units as they can behave weirdly on mobile devices
Absolute Units
Pixels (px)
Points (pt) it is slightly bigger than pixels
Pc is an similar unit (1pc = 20pt)
Rarely Used : inches, cm, mm
Absolute units should be avoided as their sizes are fixed and they will not change depending on the display size
Relative Units
Rem Unit
Size always relative to the font size of the root element (HTML element)
Default = 16px
If we change the font size in browser settings then all the rem units will scale accordingly
Tip
- Set the font size of the HTML element to 62.5%
- This causes the base font size to become 10px which makes the calculation for the other elements easier
PX to REM converter (instantly and bidirectional)
Em Unit
Size relative to the font size of the parent element
Need to be careful of compounding effect
When we used em to define an value any property leaving font size (margin, padding, etc.) the value is going to be relative to the font size of the current element
Em is an good option to use if we want all the elements inside an element to scale automatically based on the size of the parent element
% Unit
Percentage scale relative to parent element
vw/vh Units
Size elements wrt the size of the viewport/ screen (They are not relative to any element)
1 vw/vh = 1% of total viewpoint width/ height
If children elements that have size larger then the size of the parent element that is sized using viewport units, the children elements will overflow
Vmax : Use the larger of the two units (vw/ vh)
Vmin : Use the smaller of the two units
Ch Unit
Roughly equal to the size of 0 in any given font
An good choice to use if we trying to fit a certain amount of characters on a line