The min-width and min-device-width properties in CSS media queries are both used to define breakpoints, but they target different aspects of screen measurement. The key difference lies in whether they reference the viewport size or the device’s actual screen size.

Key Differences

1
min-width — Targets the viewport width (the browser window or visible area). It changes as the browser window is resized, making it ideal for responsive design.
2
min-device-width — Targets the device’s physical screen width in CSS pixels. It does not change when the browser window is resized.
3
min-width is preferred for modern responsive design because it adapts to any viewport, including resized windows and mobile browsers in different orientations.
4
min-device-width is less commonly used today, mainly for targeting specific devices or screen types in older designs.

Example: min-width vs. min-device-width

In this example, the first query reacts to changes in the browser’s viewport width — resizing the window will trigger it. The second query reacts only to the device’s screen width, so resizing the window has no effect. For responsive layouts, min-width is the modern best practice.

Difficulty: 6/10

Topics: responsive design, viewport units, media query targeting

Scenario Questions

0-2 years experience

1
You're building a mobile-first button that should be full-width on phones but narrow on tablets. You used min-device-width: 768px, but it's not working when you rotate your phone — what’s going on?
2
Your teammate says they used min-device-width to hide a sidebar on tablets, but it’s still showing on their laptop browser — how would you debug this?
3
If you set min-width: 600px to show a desktop layout, and someone resizes their browser window to 601px, will the layout change? What if they used min-device-width instead?

2-5 years experience

1
A user reports that our product page looks broken on their iPad — the desktop layout loads even though they’re holding it vertically. We’re using min-device-width: 768px. What’s the root cause and how do you fix it?
2
We’re seeing inconsistent behavior across iOS Safari and Chrome on Android when using min-device-width for media queries. Why does this happen, and what’s the right approach to ensure consistent responsive behavior?
3
Our team used min-device-width to conditionally load a heavy carousel on tablets. Now we’re getting complaints from users on laptops with small windows — how do you refactor this without breaking existing behavior?

5-8 years experience

1
You’re designing a responsive component library used across 50+ internal products. Some teams are using min-device-width for legacy reasons. How do you deprecate it safely without breaking existing layouts or introducing regressions?
2
Our analytics show that 30% of tablet users access our site in split-screen mode. How would you redesign the media query strategy to handle viewport-based responsiveness instead of device-based assumptions?
3
A third-party widget we integrate uses min-device-width to inject styles. It’s conflicting with our CSS-in-JS system. How do you isolate the issue and architect a long-term solution that avoids vendor lock-in on outdated media query practices?

8+ years experience

1
We’re migrating a 10-year-old e-commerce platform from device-based to viewport-based responsive design. How do you prioritize and phase the refactoring across teams without causing regressions in legacy checkout flows?
2
Our design system is used by 20+ products across web, PWA, and embedded kiosks. How do you establish a company-wide standard for media queries that future-proofs against new form factors like foldables and AR glasses, while maintaining backward compatibility?
3
A major browser vendor is deprecating device-width detection in favor of viewport-centric APIs. How do you lead an org-wide migration strategy, communicate the impact to product teams, and measure success without disrupting user experience?

Follow-up Questions

❓What happens if a user zooms in on a mobile device using min-device-width?
❓Why might a layout break on an iPad in landscape mode if you only use min-device-width?
❓How would you verify which one you're actually targeting in dev tools?