Relative Units
When you set a frame to 1440 px wide in Figma, that number is fixed — it never changes. Do the same in CSS and you get a layout that looks perfect on a 1440-px monitor and broken on everything else. The solution is relative units: values that are always calculated from something else, so they naturally scale.
The four units you need to know
Section titled “The four units you need to know”% — percentage of the parent
Section titled “% — percentage of the parent”width: 50% means “half the width of my parent element”. If the parent is 800 px wide, this element is 400 px. If the parent resizes to 400 px, this element becomes 200 px. Always relative, always adapting.
rem — relative to the root font size
Section titled “rem — relative to the root font size”rem stands for “root em”. By default, browsers set the root font size to 16 px, so 1rem = 16px. The power is that if a user changes their browser’s text size preference (for accessibility), rem values scale with it. Fixed px values do not.
1.5rem= 24 px (at the default 16 px root)0.875rem= 14 px
Use rem for font sizes, spacing, padding, and margins.
em — relative to the current element’s font size
Section titled “em — relative to the current element’s font size”em multiplies against the element’s own font-size. This makes it useful for padding that should scale proportionally with text size (for example, a button that feels the same size regardless of the text inside it). But it can stack unexpectedly when nested, so most designers prefer rem for general spacing.
vw / vh — percentage of the viewport
Section titled “vw / vh — percentage of the viewport”1vw = 1% of the viewport width. 1vh = 1% of the viewport height. These are relative to the browser window itself, not to any parent element. A full-screen hero section that always fills the screen? height: 100vh. A fluid heading that grows with the page? font-size: 5vw.
Fixed vs relative — side by side
Section titled “Fixed vs relative — side by side”The preview below shows two boxes. The first uses fixed px; the second uses % and rem. Resize the preview pane (make your browser narrower or view on a phone) to see how they behave differently.
Notice that the red box always stays 280 px — on a narrow screen it overflows or gets clipped. The green box shrinks gracefully because 80% is always relative to whatever space is available.