Media Queries

CSS Media Queries

Learn how CSS can apply different styles depending on the available screen space, device capabilities, or user preferences, allowing a webpage to adapt to different environments.

Why It Matters

A webpage can be opened on a phone, tablet, laptop, or large desktop screen.

The HTML does not need to change for each device. CSS can adapt the presentation based on the environment in which the page is being displayed.

Media queries provide the conditional part of responsive CSS:

@media (condition) {
  /* styles applied when the condition is true */
}

They are one of the main tools used to build responsive websites.

Prerequisites

• HTML elements and attributes
• Basic CSS selectors and properties
• CSS box model
• Basic Flexbox
• Basic understanding of CSS units

What You'll Understand

• What a CSS media query is
• How media-query conditions work
• How min-width and max-width work
• Why mobile/narrow-first CSS is often easier to maintain
• How to choose breakpoints based on content
• How multiple media queries can work together
• How to use relative units such as rem for breakpoints
• How to respond to screen orientation
• How to detect user preferences such as reduced motion
• What the viewport meta tag does
• How media queries differ from JavaScript-based screen-size checks
• Common responsive-design mistakes
• How to test responsive layouts properly

1. What Is a Media Query?

A media query allows CSS rules to be applied only when a condition is true.

For example:

.card {
  width: 100%;
}

@media (min-width: 40rem) {
  .card {
    width: 50%;
  }
}

The first rule applies by default.

When the viewport is at least 40rem wide, the second rule also applies.

You can think of it as:

Is the viewport at least 40rem wide?

        YES → apply these styles
         │
         NO  → use the normal styles

The browser evaluates the condition automatically.

2. The Viewport Meta Tag

Responsive CSS depends on the browser correctly representing the device's viewport.

For a normal responsive webpage, include this inside <head>:

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

width=device-width tells the browser to use the device's actual viewport width.

initial-scale=1 sets the initial zoom level.

Without this on a typical mobile page, the browser may use a wider virtual viewport and scale the page down, making responsive layouts appear to behave incorrectly.

This is why the viewport meta tag should be part of the standard HTML document setup for responsive pages.

3. min-width

One of the most useful media-query conditions is min-width.

@media (min-width: 40rem) {
  .services {
    display: flex;
  }
}

This means:

Apply these styles when the viewport is at least 40rem wide.

A common pattern is:

.services {
  display: block;
}

@media (min-width: 40rem) {
  .services {
    display: flex;
  }
}

The narrow layout is the default.

The wider layout is added only when there is enough room.

4. max-width

max-width does the opposite.

@media (max-width: 39.99rem) {
  .navigation {
    /* narrow-screen styles */
  }
}

The condition is true when the viewport is no wider than the specified value.

You may encounter CSS written this way, particularly in existing projects.

However, when starting a new responsive design, a narrow-first approach using default styles plus min-width queries can often be easier to reason about.

5. Narrow-First Responsive Design

A common approach is:

1. Build the narrow layout first.
2. Add styles when more space becomes available.
3. Add additional breakpoints only when the content requires them.

For example:

.services {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .services {
    flex-direction: row;
  }
}

On a narrow screen:

Service A
Service B
Service C

When there is enough room:

Service A    Service B    Service C

The important idea is not that every website must use mobile-first CSS.

The important idea is:

Start with the most constrained layout and add complexity only when the available space allows it.

6. Choosing a Breakpoint

A breakpoint is the point at which a media-query condition changes the layout.

Do not begin by asking:

What breakpoint should I use for an iPhone?

Instead ask:

At what width does my content stop working well?

For example, suppose three cards are displayed in a row:

┌────────┐ ┌────────┐ ┌────────┐
│ Card 1 │ │ Card 2 │ │ Card 3 │
└────────┘ └────────┘ └────────┘

If the window becomes narrower and the cards become too small to contain their content comfortably, that is evidence that the layout needs to change.

The breakpoint should be near the point where the content needs a different arrangement.

This produces a content-driven breakpoint rather than a device-driven breakpoint.

7. Breakpoints Are Not Device Categories

You may see breakpoints such as:

@media (min-width: 640px) { }
@media (min-width: 768px) { }
@media (min-width: 1024px) { }

These numbers are common in frameworks and design systems.

They are not universal rules.

A design does not need a breakpoint simply because a particular phone, tablet, or laptop has that width.

Different content has different requirements.

A navigation bar might need to change at one width.

A card grid might need to change at another.

A calculator interface might work perfectly without changing at either width.

Let the content determine the breakpoint.

8. Use Relative Breakpoint Units

You will commonly see breakpoints written in px, but relative units can also be useful.

For example:

@media (min-width: 40rem) {
  .services {
    flex-direction: row;
  }
}

The exact unit choice depends on the project's design system.

The important thing is consistency.

If your project uses a defined spacing and typography scale based on rem, using rem breakpoints can make the responsive system easier to reason about.

9. Multiple Media Queries

A page can have more than one breakpoint.

For example:

.layout {
  display: block;
}

@media (min-width: 40rem) {
  .layout {
    display: flex;
  }
}

@media (min-width: 64rem) {
  .layout {
    gap: 2rem;
  }
}

The default styles apply first.

At 40rem and above, the first media query applies.

At 64rem and above, both media queries can apply.

Think of the layout as gaining capabilities as more space becomes available.

10. Do Not Create Too Many Breakpoints

It is tempting to keep adding breakpoints whenever something looks slightly wrong.

For example:

@media (min-width: 35rem) { }
@media (min-width: 40rem) { }
@media (min-width: 45rem) { }
@media (min-width: 50rem) { }
@media (min-width: 55rem) { }

This can quickly make a stylesheet difficult to understand.

Every breakpoint creates another layout state that developers need to test and maintain.

Prefer:

narrow layout
      ↓
one meaningful breakpoint
      ↓
wide layout

Add another breakpoint only when the content genuinely needs another arrangement.

11. Combining Conditions

Media queries can contain more than one condition.

For example:

@media (min-width: 40rem) and (max-width: 64rem) {
  .sidebar {
    width: 240px;
  }
}

This applies when the viewport is between the specified widths.

You may also see conditions such as:

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

This applies when the viewport is in landscape orientation.

For most responsive layouts, width is the primary concern. Other conditions should be introduced when there is a genuine design requirement for them.

12. Orientation

Media queries can detect whether the viewport is portrait or landscape.

@media (orientation: landscape) {
  .calculator {
    max-width: 600px;
  }
}

The two common values are:

portrait
landscape

Orientation can be useful for interfaces where the available vertical and horizontal space changes significantly.

However, do not assume that orientation alone tells you how much space is available.

A landscape phone and a landscape desktop have very different dimensions.

13. User Preferences

Media queries can also respond to some user preferences.

One particularly important example is reduced motion.

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

This allows a website to respect users who have indicated that they prefer less motion.

Another commonly used preference is color scheme:

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

This can be used to respond to the user's system light/dark preference.

These are not replacements for a complete theme system, but they are useful examples of media queries responding to more than screen width.

14. Media Queries and JavaScript Are Different

A media query is CSS.

It changes presentation based on a condition.

JavaScript can also inspect the viewport:

const isWide = window.matchMedia("(min-width: 40rem)").matches;

These solve different problems.

Use CSS media queries when the goal is primarily presentation or layout.

Use JavaScript when the application genuinely needs to change its behaviour or logic based on a media condition.

For example, changing a grid from one column to three columns is normally a CSS responsibility.

Do not automatically use JavaScript just because a layout changes at a particular width.

15. Example: Responsive Navigation

A simple example:

.navigation {
  display: none;
}

.menu-button {
  display: block;
}

@media (min-width: 48rem) {
  .navigation {
    display: flex;
  }

  .menu-button {
    display: none;
  }
}

The narrow layout shows the menu button.

The wider layout shows the navigation.

The HTML does not need to be duplicated for every screen size.

16. Example: Responsive Calculator

Imagine a calculator that is already styled for a narrow screen:

.calculator {
  width: 100%;
  max-width: 320px;
}

When more space becomes available, we might increase the maximum width:

@media (min-width: 40rem) {
  .calculator {
    max-width: 400px;
  }
}

Or perhaps the calculator's surrounding layout changes:

.page {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 60rem) {
  .page {
    flex-direction: row;
    align-items: flex-start;
  }
}

The calculator itself does not necessarily need to change.

Sometimes the responsive change belongs to the layout around the component.

17. Testing Media Queries

Do not test only:

very narrow
very wide

Instead, resize the browser slowly.

Watch what happens as the width changes.

Look for:

• text becoming difficult to read
• buttons becoming too narrow
• cards becoming cramped
• navigation items colliding
• excessive empty space
• horizontal scrolling
• content overflowing
• images becoming too large or too small

The most useful breakpoint is often discovered while resizing through the range between common screen sizes.

18. Browser Developer Tools

Browser developer tools make responsive testing easier.

Most modern browsers provide a responsive or device-preview mode.

Use it to:

• change the viewport width
• test different heights
• inspect the active CSS rules
• identify which media query is currently applying
• test intermediate widths
• check for horizontal overflow

Do not treat device presets as proof that the layout is responsive.

They are useful testing shortcuts, but you should also test arbitrary widths.

19. Common Mistakes

Forgetting the viewport meta tag

Without:

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

mobile browsers may not represent the viewport as expected.

Choosing breakpoints from device names

Avoid thinking:

"This is the tablet breakpoint."

Instead think:

"At this width, my content needs a different layout."

Adding breakpoints too quickly

If something breaks at one width, first determine why.

Sometimes the real solution is:

• a better max-width
• flex-wrap
• gap
• a relative unit
• better content sizing
• a different layout structure

A new breakpoint is not always the answer.

Testing only popular device sizes

A page can work at:

375px
768px
1440px

and still break badly at:

620px
913px
1180px

Responsive design needs to work across a continuous range of widths.

Using JavaScript for simple layout changes

Do not use JavaScript to move a component from a column to a row when CSS can do it.

Prefer CSS for presentation.

Creating too many media queries

Too many breakpoints create too many layout states and make the stylesheet harder to reason about.

Using max-width and min-width without understanding their interaction

Remember that multiple media queries can be true at the same time.

For example:

@media (min-width: 40rem) { }

@media (min-width: 60rem) { }

At 70rem, both conditions are true.

The resulting styles are determined by the normal CSS cascade.

Best Practices

• Include the viewport meta tag on responsive HTML pages.
• Start with a layout that works in narrow space.
• Prefer content-driven breakpoints rather than device-driven breakpoints.
• Use min-width media queries when a narrow-first approach makes sense.
• Use as few breakpoints as the design genuinely needs.
• Test intermediate widths, not just common device sizes.
• Use browser developer tools to inspect responsive behaviour.
• Use CSS for presentation changes whenever possible.
• Use relative units consistently with the project's design system.
• Consider user preferences such as prefers-reduced-motion.
• Treat every breakpoint as another layout state that needs testing.
• Fix structural CSS problems before adding another breakpoint.

Where This Stops

This topic explains how media queries work and how they fit into responsive CSS.

It covers:

• viewport-based media queries
• min-width
• max-width
• narrow-first design
• breakpoint selection
• multiple breakpoints
• orientation
• user preferences
• responsive testing
• the viewport meta tag

It does not attempt to teach all of responsive design.

Separate topics can cover:

• CSS Responsive Design
• CSS Flexbox
• CSS Grid
• CSS Container Queries
• CSS Fluid Typography
• CSS Accessibility
• CSS Animations and Transitions
• Advanced media features

The key distinction is:

Media queries provide conditional styling. Responsive design is the larger practice of making an interface work well across different available spaces and environments.

Key Takeaways

• A media query applies CSS only when its condition is true.
• min-width applies styles when the viewport is at least a specified width.
• max-width applies styles up to a specified width.
• A narrow-first approach can make responsive CSS easier to maintain.
• Breakpoints should be chosen based on the content, not arbitrary device categories.
• Multiple media queries can apply at the same time.
• Width is the most common media-query condition, but orientation and user preferences can also be queried.
• CSS should normally handle presentation changes; JavaScript should handle behaviour that genuinely depends on the environment.
• Responsive layouts should be tested across a range of widths, including widths that are not predefined device sizes.
• More breakpoints do not automatically mean a more responsive design.

Related Topics

• CSS Styling and Properties
• CSS Box Model
• CSS Flexbox
• CSS Grid
• CSS Responsive Design
• CSS Positioning
• CSS Transitions and Animations
• HTML Elements and Attributes
• Accessibility Basics
• JavaScript in the Browser

Further Reading

MDN — Using media queries

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries/Using

MDN — CSS Media Queries

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Media_queries

MDN — <meta name="viewport">

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport

MDN — prefers-reduced-motion

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion

MDN — prefers-color-scheme

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme

MDN — matchMedia()

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

web.dev — Learn Responsive Design

https://web.dev/learn/design/

web.dev — Responsive Web Design Basics

https://web.dev/articles/responsive-web-design-basics