What you'll learn

  1. Quick answer
  2. What are CSS media queries?
  3. Why start mobile-first?
  4. The media query syntax
  5. Common breakpoints (and how to choose them)
  6. min-width vs max-width
  7. Before and after: a responsive card
  8. Common gotchas to avoid
  9. The bottom line
  10. FAQ

Quick Answer

CSS media queries let one stylesheet adapt its layout to different screen sizes. You write a rule like @media (min-width: 768px) { ... } and the CSS inside it only applies when the condition is true. The recommended approach is mobile-first: style for small screens first, then add min-width queries to enhance the layout on larger screens. Just remember to add the viewport meta tag, or none of it will work on phones.

What are CSS media queries?

CSS media queries are a feature that lets your stylesheet ask a question about the device or screen, and apply different styles depending on the answer. The most common question is simply: how wide is the screen right now?

Think about a course card on a shopping site. On a wide laptop it can sit beside its image, two columns side by side. On a narrow phone that same layout would be cramped or overflow off the edge, so you want the image on top and the text below, stacked in one column. A media query is how you tell the browser to switch between those two looks without writing a separate website for each device.

The best part is that this is built into plain CSS. You do not need a framework, a library, or any JavaScript. If you are still building your CSS foundations, our free CSS course walks through selectors, the box model, and Flexbox, which all work together with media queries to make a site responsive.

Why start mobile-first?

Mobile-first means you write your base styles for small screens, then layer on extra styles for bigger screens using media queries. Desktop-first is the opposite: you design for large screens first, then strip things away for smaller ones.

Mobile-first is the recommended approach for beginners, and here is the honest reason why. A phone layout is usually the simplest version of a page. Everything is one column, top to bottom. When you start from that simple base, each media query only needs to add a small change, such as switching to two columns. Your CSS stays lean and easy to follow.

Desktop-first tends to work the other way. You start with a complex layout and then use queries to undo pieces of it for smaller screens. That often means more code and more overriding, which is harder to keep track of. In much of India, and worldwide, a large share of learners browse on phones first, so building for the small screen first is also a good match for your real audience.

The media query syntax

A media query is an @media rule that wraps around normal CSS. Inside the parentheses you put a condition. If the condition is true, the CSS inside the block is applied. If not, it is ignored.

@media (min-width: 768px) {
  /* These rules apply ONLY when the
     viewport is at least 768px wide */
  body {
    font-size: 18px;
  }
}

You can read min-width: 768px as "from 768 pixels wide and up". You can also combine conditions with and:

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablets only: 768px up to 1024px */
}

One rule you must not skip: media queries based on device width only behave correctly if you add the viewport meta tag in your HTML <head>. Without it, phones pretend to be a wide desktop and zoom out, so your queries never trigger.

<meta name="viewport" content="width=device-width, initial-scale=1">

Common breakpoints (and how to choose them)

A breakpoint is the width at which your layout changes. There is no official list that every website must follow, but these values are common because they line up roughly with phones, tablets, and laptops:

  • Up to ~600px — phones (your mobile-first base styles)
  • ~600px to ~768px — large phones and small tablets
  • ~768px to ~1024px — tablets
  • ~1024px and up — laptops and desktops

Here is the more important idea, so remember it: let your content decide the breakpoint, not a device. Slowly drag your browser window narrower and watch the page. The moment the layout starts to look awkward, such as text lines getting too long or cards getting squished, that width is your natural breakpoint. Designing around real devices is fragile because new screen sizes appear every year. Designing around where your content breaks lasts much longer.

A practical recommendation: start with one or two breakpoints, not five. Many sites look great with just a single query that switches from one column to two.

min-width vs max-width

These two features are how you set the direction of a query. min-width means "this width and larger". max-width means "this width and smaller". Mobile-first designs lean on min-width; desktop-first designs lean on max-width.

Aspectmin-width (mobile-first)max-width (desktop-first)
Base styles are written forSmall screensLarge screens
Reads as"From this width up""Up to this width"
Beginner friendlyYesPartial
Keeps mobile CSS leanYesNo
Recommended defaultYesNo

You can mix them, but avoid stacking overlapping queries that fight each other. Pick min-width as your default habit, and reach for max-width only when you specifically need to target "small screens only".

Before and after: a responsive card

Let us make one real component responsive. Here is the HTML for a simple course card:

<div class="card">
  <img src="course.jpg" alt="CSS course">
  <div>
    <h3>Learn CSS</h3>
    <p>Style websites from scratch.</p>
  </div>
</div>

Before: not responsive

This version uses a fixed width and always sits in a row. On a 375px phone, a 600px card overflows the screen and forces sideways scrolling.

.card {
  width: 600px;
  display: flex;
  gap: 20px;
}

After: mobile-first and responsive

Now the base styles are built for the phone. The card fills the available width and stacks in one column. Then a single min-width query switches it to a side-by-side row on tablets and up.

/* Base: mobile — one column, stacked */
.card {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Tablet and up — two columns, side by side */
@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

Notice how small the change is. Swapping width: 600px for width: 100%; max-width: 600px already stops the overflow, and the query only flips one property. That is mobile-first in action.

Common gotchas to avoid

A few mistakes trip up almost every beginner. Watch for these:

  • Forgetting the viewport meta tag. This is the number one reason a page "ignores" media queries on a real phone. Add it to every page.
  • Using fixed widths in pixels. A width: 600px can overflow small screens. Prefer flexible values like %, max-width, or modern units, and let content flow.
  • Testing only in a desktop browser. Open your browser's developer tools and use the device toolbar (Ctrl+Shift+M in Chrome) to preview different widths without a real device.
  • Too many breakpoints. Five overlapping queries are hard to debug. Start with one, add more only when the content actually breaks.
  • Overlapping min and max ranges. If two queries both match at the same width, the later one wins, which can cause confusing results.

A quick tip on units: writing your breakpoints in em instead of px makes them respect the user's font-size settings, which is friendlier for accessibility. Pixels are perfectly fine to start with, though.

The bottom line

Media queries are the core tool for responsive design, and you can get very far with just the basics. Here is the clear recommendation to take away:

  1. Add the viewport meta tag to every HTML page.
  2. Write your base CSS mobile-first, for the small screen.
  3. Use min-width media queries to enhance the layout as the screen grows.
  4. Let your content, not specific devices, decide where the breakpoints go.
  5. Test at different widths using your browser's device tools.

Do that, and one stylesheet will serve phones, tablets, and laptops cleanly. When you are ready to go deeper into Flexbox, Grid, and the layout skills that make media queries shine, keep practicing with the free Priodemy CSS course. Build the card example above yourself, resize the window, and watch it adapt. That hands-on habit is what makes responsive design click.

Frequently Asked Questions

Do media queries work without the viewport meta tag?

Not correctly on phones. Without <meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers assume a wide desktop width and zoom the page out, so width-based media queries never match the real screen size. Add the tag to the head of every page and your queries will behave as expected.

What breakpoints should I use?

There is no fixed rule. Common starting points are around 600px, 768px, and 1024px, which loosely match phones, tablets, and laptops. But the better habit is to let your content decide: slowly shrink your browser window and add a breakpoint wherever the layout starts to look awkward. Begin with one or two breakpoints rather than many.

Should I use px, em, or rem in media queries?

Pixels are the easiest to start with and are completely fine while you learn. Once you care about accessibility, em is a good choice because breakpoints written in em respect the user's browser font-size setting, so people who zoom text get a layout that adapts with them. Pick pixels now and switch to em later if you need it.

Is mobile-first really better than desktop-first?

For most projects, yes. Mobile-first starts from the simplest single-column layout and only adds complexity with min-width queries, which keeps your CSS lean and easier to debug. Desktop-first often means writing a complex layout and then undoing parts of it for small screens, which tends to produce more code and more overrides.

How do I test responsive design without lots of phones?

Use your browser's built-in developer tools. In Chrome or Edge, press F12 to open DevTools, then click the device toolbar icon or press Ctrl+Shift+M to simulate different screen sizes and devices. You can also just drag your browser window narrower and wider to watch the layout respond in real time.

Can I combine media queries with Flexbox or Grid?

Yes, and that is the normal way to build responsive layouts. Flexbox and Grid handle how items line up, while media queries decide when to change that arrangement. In the card example, Flexbox controls the row-versus-column direction and a single media query flips it. Learning all three together, as covered in the Priodemy CSS course, is the fastest path to confident responsive design.