px, rem and em in plain terms
A CSS pixel is not a device pixel; it is a reference unit defined as 1/96 of an inch at a normal viewing distance, which a phone with a 3x display renders using three physical dots. rem means "root em": the font size of the <html> element. Browsers ship with a 16 px default, so 1 rem = 16 px until someone changes it - and readers who bump the font size in their browser settings change exactly that value, which is why rem-based layouts scale for people with low vision and px-based ones do not.
em is the same idea measured against the parent's font size, so it compounds: a 0.9em list inside a 0.9em sidebar renders at 0.81 of the base. That compounding is useful for padding that should track the element's own text, and a constant source of bugs in deep nesting. The rule of thumb most design systems settle on: rem for font sizes and layout spacing, em for padding and margins that belong to a component, px for hairline borders and anything that must not scale.
The math and a worked example
The conversions are simple ratios. rem = px / root font size. px = rem x root font size. Points come from print: 1 pt = 1/72 inch and 1 inch = 96 CSS pixels, so px = pt x 96/72 = pt x 1.3333, and 12 pt = 16 px, which is why 16 px became the default body size. Viewport units are percentages of the window: 1 vw = 1% of the viewport width, so at a 1920 px viewport 1 vw = 19.2 px and 24 px = 1.25 vw. A percentage on font-size is relative to the inherited font size, so 150% of 16 px is 24 px.
Worked example: you have a heading specified as 24 px in a design file and a 16 px root font size. 24 / 16 = 1.5, so write font-size: 1.5rem. Padding of 12 px next to it is 12 / 16 = 0.75rem. If the design was drawn at a 1440 px artboard and you want the heading to scale with the viewport instead, 24 / 1440 x 100 = 1.667vw - though pure vw type is usually a mistake because it ignores the reader's font preference. A clamp(1.25rem, 1rem + 1vw, 2rem) gives you fluid type with a floor and a ceiling.
Practical rules that avoid trouble
Do not use the old 62.5% trick (html { font-size: 62.5% } so that 1 rem = 10 px). It looks convenient but it shrinks text for anyone whose browser default is not 16 px, and it forces every component to restate a font size. Keep the root at its default and let a calculator like this one do the division.
Media query widths are measured in px or em, never rem - inside a media query, em is always relative to the browser default, not your root rule, so @media (min-width: 40em) equals 640 px in a default browser and grows if the reader enlarges text, which is generally desirable. Borders of 1 px should stay px so they never round to zero. And remember that sub-pixel values are allowed: browsers happily render 0.8125rem (13 px), rounding only at paint time.