Both rem and em are relative units, px is not. Before considering rem, it's important to understand the relationship between em, markup and inheritance.
Below, the example demonstrates how each nested child assumes the parent is 1em(100%). Thus children inherit size by scaling in relation to the parent font size.
Visit pxtoem.com for conversion tables and calculator.
While the value remains 0.773em, the actual font size is calculated at 77.3% of its direct parent, which in turn scales from its parent. This continues up the DOM tree whenever a parent has a defined font-size.
In the example, several elements, each with a font size, are nested for a visual effect. You can see it's not a good practice, because the compound inheritance creates unwanted results. However, you shouldn't have to worry about this if your CSS and markup are modular to begin with.
You can choose a different ratio/scale and calculate your own values on Type Scale.
Well, maybe not lives, but it will save lines … of code. The following examples do the same thing; update font sizes and padding within a media query. The initial values are calculated by incrementing 1em(16px) at a 1:1.2 ratio.
There's only one em value to overwrite in the media query, because em inherits and scales relative to its parent (html in this case) font size, similar to the way vector paths scale proportionally.
The code is doubled when updating px, because each value has to be recalculated and defined in the media query.
While em is relative to the font size of its direct or nearest parent, rem is only relative to the html (root) font-size. I like to think of it as a reset. If a style sheet is built in a modular fashion, then rem shouldn't be needed very often, but it can be handy at times.
For example, if you're trying to achieve consistent spacing without extra markup, rem can be used to define the padding and margins.
PX can be used for consistent padding and margins too, but it doesn't scale across media queries like em and rem.
I use em for nearly everything, rem occasionally for padding or margins, but only in a pinch, and px some times for borders.
For the most part, I want children to inherit size. If a sidebar is going to be a smaller font size, then I expect all its children to resize proportionally without having to calculate and redefine individual selectors.
My favorite em calculator is pxtoem.com. In addition to calculating em or px values, there's a handy table of the two which really helps to see the relationship.
REM is the same as em except it's always calculated from the html font size. So, just use the same pxtoem.com calculator to figure out its relation to the root size.