The alert stripe that must not budge
A colored order-alert stripe on a notification chip needs to look exactly as thick whether that chip lands on a wide dashboard or gets squeezed into a narrow mobile notch. It should never grow or shrink with whatever it's sitting in.
Which unit would you reach for here?
Give the chip's top accent bar a border-width that stays exactly as thick no matter how narrow or wide its container gets.
.chip { border-top-width: ; }
Spacing that grows with the user's settings
Some visitors bump up their browser's default font size for readability. A card's inner padding should grow right along with that setting no matter what font-size happens to be set locally inside the card itself.
Which unit would you reach for here?
Give the card padding that scales when the page's root font-size changes.
.card { padding: ; }
A button that scales with its own toolbar
This Save button lives inside a toolbar that sets its own font-size. Drop that same toolbar into a compact mobile header or a roomy desktop panel, and its buttons should scale with whatever font-size that specific toolbar has.
Which unit would you reach for here?
Give the toolbar button padding that scales with the button's own font-size (inherited from its toolbar).
.btn { padding: ; }
A storage meter that tells the truth
A "Cloud Storage" widget like the one in Google Drive or Dropbox shows a fill bar for how much of your quota is used. Drop that widget into a narrow phone sidebar or a roomy desktop panel, and the fill needs to keep reading as 80 percent of its own card, not some fixed pixel amount.
Which unit would you reach for here?
Give the storage fill a width that always takes up 80% of its card, whatever width the card happens to be.
.storage-fill { width: ; }
A hero section that claims its slice of the screen
A restaurant landing page's hero section should always take up 40% of the visible browser window's height, the way a video call fills most of your screen no matter what's stacked around it or how tall its parent container happens to be.
Which unit would you reach for here?
Give the hero section a height that's always exactly 40% of the visible browser window, regardless of anything around it.
.hero { height: ; }
A toast that ignores its cramped trigger panel
Clicking "Add to cart" in a deliberately narrow 160px quick-actions panel should pop up a toast notification sized relative to the actual screen not squeezed to the width of the narrow panel that triggered it.
Which unit would you reach for here?
This toast is triggered from a cramped 160px-wide panel, but it still needs to span half of the actual browser window, not half of its cramped trigger.
.toast { width: ; }