How to use a media query in CSS?

To use a media query in CSS, write the @media rule followed by a condition such as (min-width: 768px), then place the CSS you want to apply inside the braces. The styles take effect only when the device or viewport matches that condition, which is how you build responsive layouts that adapt to phones, tablets, and desktops.

This guide covers the syntax, common breakpoints, mobile-first design, and how to verify your responsive CSS across real browsers. For a conceptual overview, see the related answer on what is a media query in CSS.

What Is a CSS Media Query?

A CSS media query applies styles only when the browser and device environment match a rule you specify, such as a viewport wider than 480 pixels. Media queries are the foundation of responsive web design: instead of shipping one fixed layout, you define conditions and let the same HTML adapt its presentation to the screen. The pixel widths at which the layout changes are called breakpoints.

Media Query Syntax

The @media rule accepts an optional media type (such as screen or print) and one or more feature conditions in parentheses. The most common features are min-width and max-width:

/* Applies only on screens 768px wide or wider */
@media screen and (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

You can combine conditions with and, separate alternatives with commas (acting as or), and target other features like orientation and resolution to handle specific devices or print output.

Mobile-First Media Queries

The recommended approach is mobile-first: write base styles for small screens, then use min-width queries to progressively enhance the layout for larger viewports. This keeps CSS lean and performs well on phones.

/* Base styles: mobile */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Each breakpoint layers on top of the last, so the single-column mobile grid becomes two columns on tablets and four on desktops. Learn more about choosing values in the TestMu AI common CSS breakpoints guide.

Common Breakpoints and Best Practices

• Phones: up to about 480px.
• Tablets: roughly 481px to 768px.
• Small laptops: roughly 769px to 1024px.
• Desktops and large screens: 1025px and above.
• Let content decide: add a breakpoint where the design starts to break, not just at device sizes, and use relative units like rem and percentages for fluid scaling.

Also include the viewport meta tag in your HTML head so mobile browsers render at the correct scale for these queries to work as intended. For more, read responsive CSS media queries.

Common Mistakes and Troubleshooting

• Missing the viewport meta tag: Without <meta name="viewport" content="width=device-width, initial-scale=1">, phones render a zoomed-out desktop layout and your queries appear to do nothing.
• Mixing min-width and max-width carelessly: Overlapping ranges cause conflicting styles. Pick one direction, usually mobile-first min-width, and stay consistent.
• Specificity conflicts: A later or more specific rule can override your media query styles. Check the cascade before adding hacks.
• Hardcoding pixel widths everywhere: Fixed widths break fluidity. Combine media queries with flexible units and layouts like Grid and Flexbox.
• Testing only in one browser at one size: Dev-tool resizing hides real rendering bugs. Validate on real browsers and devices.

Test Responsive CSS Across 3000+ Real Browsers and Devices

Media queries only pay off if the layout actually holds up on the screens your visitors use. Browser dev-tool emulation is a good first check, but it approximates rendering and can hide real bugs in fonts, scrollbars, and viewport handling. With TestMu AI, you can run cross-browser testing across 3000+ real browsers, operating systems, and device combinations to see exactly how each breakpoint renders. Preview your responsive pages, catch layout shifts at specific widths, and confirm your media queries behave the same everywhere by choosing to test your website on different browsers.

Conclusion

Using a media query in CSS comes down to the @media rule, a sensible set of min-width breakpoints, and a mobile-first mindset that layers layout as the viewport grows. Add the viewport meta tag, let your content guide where breakpoints go, and lean on relative units for fluidity. Finally, validate across real browsers and devices so your responsive design looks right for every visitor.

Frequently Asked Questions

What is the basic syntax of a CSS media query?

A media query starts with the @media rule, followed by an optional media type and one or more feature conditions in parentheses, then a block of CSS. For example, @media (min-width: 768px) applies its styles only when the viewport is at least 768 pixels wide.

What is the difference between min-width and max-width?

min-width applies styles when the viewport is at or above a value, which suits mobile-first design. max-width applies styles at or below a value, which suits desktop-first design. Choosing one consistently keeps your breakpoints predictable.

What are common CSS breakpoints?

Common breakpoints roughly map to devices: around 480px for phones, 768px for tablets, 1024px for small laptops, and 1200px and up for large desktops. Treat these as starting points and adjust to your own content rather than fixed rules.

What is mobile-first design in CSS?

Mobile-first design writes base styles for small screens first, then uses min-width media queries to progressively add layout for larger viewports. It keeps CSS lean, improves performance on phones, and scales up cleanly to tablets and desktops.

Can I combine multiple conditions in a media query?

Yes. Use the and operator to require multiple conditions, such as @media (min-width: 768px) and (max-width: 1024px), and commas to act as or. You can also add orientation, resolution, and other features to target specific scenarios.

Why does my responsive layout look wrong on real devices?

Browser dev-tool emulation approximates screens but misses real rendering, fonts, and viewport quirks. Missing the viewport meta tag or overlapping breakpoints also cause issues. Verify on real browsers and devices to see how the layout truly behaves.

• What is a media query in CSS?
• How do you change the breakpoint in CSS?
• What is the CSS breakpoint for mobile?
• How do I make my CSS code responsive?
• How to target a link in CSS?