Hey there! Your hunch is spot-on—using max-width media queries is exactly the right approach when you're starting with a desktop version and adapting it for smaller screens. Let me break this down to make sure you feel totally confident about it:

Why max-width fits your desktop-first workflow #

When you build desktop-first, you start by writing all your base CSS for the largest screen sizes first. Then, max-width media queries let you target screens smaller than a specified width, overriding or adjusting the desktop styles to fit those smaller viewports. This makes perfect sense because you're scaling down from the full-size layout you already built, rather than starting from scratch for mobile.

A quick code example to illustrate #

Let’s say your desktop layout has a fixed-width container:

/* Desktop base styles */
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

For tablets (say, screens under 768px), you can use max-width to tweak that container to fit the smaller screen:

/* Tablet-specific adjustments (screens ≤ 768px) */
@media (max-width: 768px) {
  .container {
    width: 90%;
    padding: 0 1rem;
  }
}

And for mobile phones (screens under 480px), you can add another breakpoint to refine further:

/* Mobile-specific adjustments (screens ≤ 480px) */
@media (max-width: 480px) {
  .container {
    width: 100%;
    padding: 0 0.5rem;
  }
}

Quick clarity on mobile-first vs desktop-first #

Just to avoid confusion: if you were starting with a mobile layout and scaling up to desktop, you’d use min-width media queries instead. But since you already have your desktop version polished, sticking with max-width is the most efficient way to adapt it—no need to rewrite all your base styles!

A small pro tip #

Instead of clinging to generic device widths (like 768px for tablets), test your layout by shrinking your browser window. Add breakpoints when your content starts to look cramped, overlap, or break—these "content breakpoints" will make your design far more flexible across all devices, not just common ones.

内容的提问来源于stack exchange，提问作者Nika Roffy