What units are typically used for defining breakpoints (e.g., px, em, rem)?

Difficulty: 4/10

responsive units, breakpoint strategy, CSS sizing

Common Units for CSS Breakpoints

Breakpoints in CSS are typically defined using absolute or relative units, depending on how flexible the design needs to be. The most commonly used units are px, em, and rem, each serving different purposes in responsive web design.

Common Units Explained

1
px (pixels) — The most common and precise unit; ideal for fixed breakpoints based on specific device widths.
2
em — Relative to the font size of the element; allows scaling with user preferences or zoom levels.
3
rem — Relative to the root font size (html element); ensures consistent scaling across the document.

Example: Using Different Units for Breakpoints

Scenario Questions

0-2 years experience

2-5 years experience

1Your team switched a media query from px to em and suddenly the layout breaks on some devices. Walk me through how you would debug the issue.

Follow-up Questions