Which design approach defines base styles for small viewports and then uses min-width media queries to adapt layouts for larger screens?

Which design approach defines base styles for small viewports and then uses min-width media queries to adapt layouts for larger screens?

• A. Mobile-first design with base styles and min-width media queries.
• B. Desktop-first design with max-width media queries.
• C. Inline styles for all breakpoints.
• D. Using only JavaScript to adjust layout.

Answer: (A)

The idea being tested is mobile-first responsive design using min-width media queries. Start by defining base styles for small screens, then add media queries that use min-width to progressively adjust the layout as the viewport gets wider. Because min-width means “apply this rule when the viewport is at least this wide,” the styles build up as the screen grows, creating a natural, ascending cascade from mobile to larger screens. This approach keeps the default styles lightweight and accessible on mobile, and then enhances the layout for tablets and desktops without rewriting from scratch. It also tends to be easier to maintain—you have a single baseline and targeted overrides for larger sizes. In contrast, desktop-first with max-width media queries would reverse the flow, applying desktop-like styles to smaller viewports, which isn't what this question describes. Inline styles for all breakpoints skip the responsive breakpoint system entirely, and relying solely on JavaScript to adjust layout isn’t the CSS-driven, progressive enhancement approach the question is about.

The idea being tested is mobile-first responsive design using min-width media queries. Start by defining base styles for small screens, then add media queries that use min-width to progressively adjust the layout as the viewport gets wider. Because min-width means “apply this rule when the viewport is at least this wide,” the styles build up as the screen grows, creating a natural, ascending cascade from mobile to larger screens.

This approach keeps the default styles lightweight and accessible on mobile, and then enhances the layout for tablets and desktops without rewriting from scratch. It also tends to be easier to maintain—you have a single baseline and targeted overrides for larger sizes.

In contrast, desktop-first with max-width media queries would reverse the flow, applying desktop-like styles to smaller viewports, which isn't what this question describes. Inline styles for all breakpoints skip the responsive breakpoint system entirely, and relying solely on JavaScript to adjust layout isn’t the CSS-driven, progressive enhancement approach the question is about.