...
By necessity, any stylesheets will include a combination of different units when specifying sizes of things. However, it is important to use the proper units for the proper uses:
px | - border width (and radius?)
|
|---|
rem | - breakpoints
- maximum container widths
- font sizes
- margins and padding
|
|---|
| em | - margins and padding for text blocks where space should scale with the font size
|
|---|
| 1.x | - Unitless ratios are used for line-heights.
|
|---|
| % | - layouts (flex and grid)
- images size within containers
- setting the base font size (though you should usually leave it at 100% of the user's browser default for accessibility)
|
|---|
| vw/vh | - when elements need to be sized in relation to the window/device height
|
|---|
...