Media Queries in CSS

Media queries in CSS allow styles to change when certain conditions are true. The most common condition is viewport width, but media queries can also respond to orientation, resolution, hover support, pointer type, color scheme, reduced motion preferences, and print output. They are one of the core tools behind responsive web design.

The main job of a media query is not to target a specific phone or laptop. Its job is to apply a better layout when the available space or device capability changes. A good media query solves a real design problem: text becomes cramped, cards become too narrow, navigation no longer fits, or a component needs a different interaction pattern.

Basic Media Query Syntax

A media query wraps CSS rules inside an @media block. The rules inside that block run only when the condition matches.

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 260px 1fr;
  }
}

This rule applies only when the viewport is at least 768px wide. Below that width, the layout uses its normal base styles.

min-width Media Queries

The min-width condition is commonly used for mobile-first CSS. You write the small-screen layout first, then add enhancements for larger screens.

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

@media (min-width: 900px) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

This keeps the mobile layout simple and stacked. When enough space exists, the card layout becomes a three-column grid.

max-width Media Queries

The max-width condition applies styles up to a certain width. It is often used in desktop-first CSS, where the large layout is written first and smaller-screen overrides are added later.

@media (max-width: 700px) {
  .sidebar {
    display: none;
  }
}

This style hides the sidebar on screens up to 700px wide. It works, but too many max-width overrides can become harder to maintain because mobile fixes are scattered after desktop rules.

Mobile First vs Desktop First

Both approaches work, but mobile-first CSS is usually cleaner for modern sites. A stacked mobile layout is often the simplest base. Wider layouts add columns, bigger spacing, larger typography, and more complex alignment.

Approach	Base Styles	Common Query
Mobile first	small screens	min-width
Desktop first	large screens	max-width
Component based	component default	query where component breaks

The best approach is the one that keeps the CSS readable. For most new responsive layouts, start mobile-first unless the project already uses a different system.

Choosing Breakpoints

Breakpoints should come from the layout, not only from device names. If a grid looks cramped at 820px, that is where the breakpoint belongs. If a navigation menu wraps awkwardly at 760px, that component needs a change there.

@media (min-width: 720px) {
  .feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Resize the browser slowly and watch where the design becomes uncomfortable. This is more reliable than memorizing device widths.

Range Syntax

Modern CSS supports cleaner range syntax for media queries. It can make width conditions easier to read.

@media (width >= 768px) {
  .container {
    max-width: 1120px;
  }
}

@media (600px <= width <= 1000px) {
  .promo {
    padding: 2rem;
  }
}

Range syntax communicates the condition directly. You may still see older min-width and max-width syntax in many projects because it is widely known and supported.

Orientation Queries

The orientation feature can detect portrait or landscape layout. It is useful for components that need different spacing when a device is rotated.

@media (orientation: landscape) {
  .hero {
    min-height: 70vh;
  }
}

Use orientation carefully. Width-based breakpoints are often enough. Orientation is helpful when the same device changes available vertical space significantly.

Hover and Pointer Queries

Not every device has a mouse. Media queries can check whether hover is available and whether the pointer is fine or coarse.

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-4px);
  }
}

This applies hover effects only on devices where hover makes sense. Touch devices do not need hover-only interactions that users cannot reliably trigger.

prefers-reduced-motion

Some users prefer less animation. CSS can respect that system preference with prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

This does not mean every animation is bad. It means the site should avoid forcing motion-heavy effects on users who have asked for reduced motion.

prefers-color-scheme

The prefers-color-scheme query can apply styles based on whether the user prefers light or dark mode.

@media (prefers-color-scheme: dark) {
  body {
    background: #111827;
    color: #f9fafb;
  }
}

This is useful when a site supports automatic theme behavior. Always test contrast, links, code blocks, tables, and form fields in both schemes.

Print Media Queries

Media queries are not only for screens. Print styles can simplify pages for paper or PDF output.

@media print {
  .site-header,
  .site-footer,
  .ads {
    display: none;
  }
}

Print styles can remove navigation, ads, animations, and unnecessary decoration so the main content prints cleanly.

Combining Conditions

Conditions can be combined with and. This lets CSS target a more specific situation.

@media (min-width: 900px) and (hover: hover) {
  .menu-item:hover .dropdown {
    display: block;
  }
}

This dropdown hover behavior applies only on wider screens where hover is available. Mobile layouts can use a different interaction.

Media Types: screen, print and all

Media queries can target media types. The most common media type is screen, but print is also useful. If no media type is written, the query usually applies to all media types that match the feature condition.

@media screen and (min-width: 900px) {
  .layout {
    display: grid;
  }
}

In normal website CSS, many developers omit screen and write only the feature query. Print is different because printed pages often need a separate simplified layout.

The not Keyword

The not keyword negates a media query. It is less common in everyday responsive CSS, but it can be useful when a style should apply everywhere except a specific condition.

@media not print {
  .screen-only-note {
    display: block;
  }
}

Use this carefully because negative conditions can be harder to read than positive conditions. Most responsive CSS is clearer when it states exactly when a layout should apply.

Order Matters in Media Queries

Normal cascade rules still apply inside media queries. If two matching rules have the same specificity, the later rule wins. This matters when multiple breakpoints target the same selector.

.card {
  padding: 1rem;
}

@media (min-width: 700px) {
  .card {
    padding: 1.5rem;
  }
}

@media (min-width: 1100px) {
  .card {
    padding: 2rem;
  }
}

With mobile-first CSS, place smaller min-width queries before larger min-width queries. That way larger-screen rules can build on smaller-screen rules naturally.

Media Queries and Specificity

A media query does not increase selector specificity. The selector inside the media query still follows normal specificity rules. If a responsive rule does not work, the problem may be specificity, order, or a condition that is not matching.

@media (min-width: 900px) {
  .button {
    padding: 1rem 1.5rem;
  }
}

This rule has the same selector specificity as .button outside the query. If a later rule overrides it, the media query itself is not the issue.

Debugging Media Queries

When a media query does not work, first confirm that the condition is true. Browser developer tools can show the current viewport size and active CSS rules. Then check whether another rule overrides the style.

• Check the current viewport width.
• Confirm the media query condition matches.
• Check CSS order and specificity.
• Check whether the viewport meta tag exists.
• Resize slowly and watch when the rule turns on.
• Test real interaction support for hover and pointer queries.

Real Example: Responsive Article Layout

A long article page may start as one column on mobile, then add a table of contents or sidebar on desktop. Media queries make that change only when the layout has enough width.

.article-page {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .article-page {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }
}

The mobile version keeps the main content first and readable. The desktop version adds a sidebar column. The minmax(0, 1fr) value protects the main column from overflowing when it contains code blocks, tables, or wide images.

Media Queries vs Container Queries

Media queries respond to the viewport or device environment. Container queries respond to the size of a specific container. For full page layout, media queries are still useful. For reusable components that can appear in different places, container queries can be more accurate.

For example, a card might be wide in the main content area but narrow in a sidebar. A viewport media query cannot know that difference, but a container query can. Modern responsive CSS often uses both tools.

A Practical Breakpoint Workflow

A reliable workflow is to build the component without breakpoints first. Make it fluid with max-width, flexbox, grid, and responsive images. Then resize the page and add a media query only when the design actually breaks.

This prevents breakpoint overload. If a flexible layout already works from 320px to 900px, there is no reason to add extra rules in the middle. Every breakpoint should have a clear job.

Good media queries should feel intentional, not like emergency patches for weak base CSS.

Build flexible components first, then let media queries handle the moments where flexibility is no longer enough.

This keeps responsive CSS predictable.

Predictable CSS is easier to maintain.

Common Media Query Mistakes

• Choosing breakpoints only from popular device widths.
• Writing too many overrides instead of making the base layout flexible.
• Using hover effects as the only way to access important content.
• Forgetting orientation and viewport height on mobile layouts.
• Hiding content on small screens instead of adapting it.
• Not testing between breakpoints.

Media Queries in CSS FAQ

What are media queries in CSS?

Media queries apply CSS only when conditions such as width, orientation, hover support, or user preference match.

Should I use min-width or max-width?

For mobile-first CSS, use min-width. For desktop-first CSS, max-width is common.

How many breakpoints should I use?

Use as many as the design needs, but avoid adding breakpoints without a real layout problem.

Can media queries detect dark mode?

Yes. Use prefers-color-scheme to respond to the user color scheme preference.

---