Recommended Use Cases for CSS Units:
pixels: Use pixels when working with properties aren’t really affected by responsiveness, like border-radius, box shadow, or border-width.
rem: When setting font sizes, use rem. Because it points to the root element, make sure that the font size of your root element is either 16px or 10px. (10px might make it easier to calculate rem values!). Don’t use pixels to set the font sizes of your root elements. If a user tries to manually change their browser’s font size, your webpage will not scale properly.
em: When working with margins and paddings, use em units. Because the font size is related to the parent element, and every other property will adjust according to that particular element’s font size, everything can be adjusted at once.
%: Use percentages when working with widths and heights.
vh & vw: Use vh and vw when working with elements that depend on the viewport of the website.