When should I use px vs rem vs em?


When should I use px vs rem vs em?

We should use px units when we want to set a specific font-size, height, width, padding, margin, etc that will not change even when the user changes a setting, like a larger default font-size, for the browser.

We should use rem units when we want our text and layout to adjust based on the default font-size a user has set for their browser (which is the default font-size of the html element, usually 16px).

Lastly, we should use em units when we want specific properties of an element to scale proportionately to a font-size other than the default font-size set for the root (html) element.


How do they work in terms of responsiveness (change in screen size, or different browser for examples?)