CodePark/ questions / Responsive design & units
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › Responsive design & units

What does mobile-first responsive design mean in CSS, and why is it usually preferred?

.cards { display: grid; gap: 1rem; }

@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 72rem) {
  .cards { grid-template-columns: repeat(4, 1fr); }
}

Mobile-first means your base styles, outside any media query, target the smallest screens. Then min-width media queries add layout as the screen gets wider. Desktop-first is the reverse. It starts with desktop styles and uses max-width queries to undo them.

Mobile-first is usually preferred for these reasons:

  • The small-screen layout is usually the simplest, often a single column.
  • Larger screens only add rules instead of overriding them, so you write less CSS with fewer overrides.
  • It makes you decide which content matters most on small devices.

Also include <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, mobile browsers draw the page at a desktop width and then scale it down. Pick breakpoints where your content starts to break, not for specific devices. For changes inside one component, consider container queries, which react to the size of the component's container.

  • Base styles target small screens, and min-width queries add to them.
  • Larger screens add rules instead of overriding them.
  • The viewport meta tag is required, or phones show a shrunk desktop page.
  • Choose breakpoints where the content breaks, not by device.