Let's read a box that deliberately mixes three different units, and understand why each one was chosen for its specific job.
.box { width: 80%; padding: 1.5rem; font-size: 1.2rem; }.
width: 80% is chosen because this box should feel FLEXIBLE on a wide desktop screen, 80% of the parent might be 900px; on a narrow phone, 80% might be 300px. The box automatically adapts its width to whatever container it's placed inside, without a single media query.
padding: 1.5rem uses rem specifically because padding should stay CONSISTENT regardless of where this box appears on the page, or how deeply it's nested inside other components 1.5rem always means '1.5 times the root font-size', a stable, predictable amount of space no matter the context.
font-size: 1.2rem, for the same reason, keeps this box's text size anchored to the same root reference point as everything else in the design system, rather than compounding unpredictably if it happened to sit inside another element that also uses em-based sizing.
Notice px never appears here at all this box was deliberately built to be flexible and consistent, not pixel-fixed, which is exactly the right choice for a responsive card component.