Questions
4 of 33
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 (htmlelement); ensures consistent scaling across the document.
Example: Using Different Units for Breakpoints
Scenario Questions
0-2 years experience
- 1We need a simple two‑column layout that switches to a single column on small screens. Which unit would you use for the breakpoint and why?
- 2If a designer gives you a breakpoint of 768px, how would you translate that to em or rem assuming a base font size of 16px?
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.
- 2When deciding between px and rem for breakpoints in a component library, what factors would you weigh and how would you document the decision?
5-8 years experience
- 1You are designing a responsive design system used across many products. How would you standardize breakpoint units to balance design fidelity and user‑controlled scaling?
- 2Explain how using rem‑based breakpoints could impact performance or rendering on low‑end devices, and what mitigations you might employ.
8+ years experience
- 1Our legacy codebase defines all breakpoints in px, but we want to migrate to a fluid, rem‑based system without breaking existing pages. Outline a migration strategy that minimizes risk across multiple teams.
- 2At a company‑wide level, how would you set a policy for breakpoint units that accommodates both design consistency and accessibility requirements, and how would you enforce it across front‑end squads?
Follow-up Questions
- What are the accessibility implications of using em/rem for breakpoints?
- How does device pixel ratio affect a breakpoint defined in px?
- Can you mix units in a single media query? What should you watch out for?