Questions
2 of 33
What is the syntax for setting a breakpoint using a media query?
Difficulty: 3/10
media queries, breakpoints, responsive design
Syntax for Setting a Breakpoint in CSS
In CSS, breakpoints are created using media queries. A media query checks the width (or other features) of the viewport and applies specific CSS rules when conditions are met. The most common breakpoints use the min-width or max-width properties.
Common Syntax Patterns
- 1
Use
@media (max-width: value)to apply styles for smaller screens. - 2
Use
@media (min-width: value)to apply styles for larger screens. - 3
Combine multiple conditions using logical operators such as
and.
Example: CSS Media Query Syntax
Scenario Questions
0-2 years experience
- 1We need a mobile‑first layout that switches to a two‑column grid at 768px. How would you write the CSS breakpoint?
- 2If you add a media query with max-width: 600px but the styles aren't applying, what could be wrong in the syntax?
- 3Show me the exact line of CSS you’d use to change the font size when the viewport is at least 1024px.
2-5 years experience
- 1You added a breakpoint at 1024px, but on some devices the layout still looks like the mobile version. Walk me through how you'd debug the media query syntax.
- 2When refactoring a component library, you need to replace hard‑coded pixel breakpoints with a design token. How would you adjust the media query syntax to use a CSS variable?
- 3Explain why you might choose min-width versus max-width in your breakpoint definitions, and how that affects the order of your media queries.
5-8 years experience
- 1Our design system defines breakpoints in em units for accessibility. How would you implement those breakpoints in CSS, and what are the trade‑offs compared to using px?
- 2We have a page with dozens of components each declaring their own media queries, leading to duplicated CSS. How would you restructure the breakpoint syntax to improve maintainability and reduce CSS size?
- 3During a performance audit, you notice that many media queries are being evaluated on every resize. What strategies can you employ at the breakpoint syntax level to mitigate this?
8+ years experience
- 1Our company is migrating a legacy codebase that uses inline style tags with hard‑coded pixel breakpoints to a centralized design system using CSS custom properties. Describe the steps and considerations for rewriting the breakpoint syntax across multiple repositories.
- 2When planning a cross‑team UI framework, how would you standardize breakpoint syntax to accommodate both web and native platforms, ensuring consistency while allowing platform‑specific overrides?
- 3What governance process would you put in place to evolve breakpoint definitions over time without breaking existing pages?
Follow-up Questions
- How would you verify that the breakpoint is firing as expected?
- What edge cases might cause a media query to be ignored?
- How would you document this breakpoint for other developers?