Pixel vs. Rem? What’s your take on this?

Question

What’s the main difference between pixel(px) and rem? And when should I use px over rem?

Answer 1

Pixels are an absolute unit. This means that a heading that has the font-size 30px always has exactly this size, namely 30 pixels. No matter what happens around it.

You can only tell how big a heading is that is specified in 2.3em when you know what environment it is in. This is because the unit em refers to the next higher container.

The unit rem is identical to the unit em, but the element to which this unit refers is the root element, i.e. the html element.