CSS Media Queries

Imagine designing a restaurant menu. On a large, double-page board, you can display high-definition photos, descriptions, and price grids side-by-side cleanly. But if you try to print that same layout on a tiny pocket pamphlet, the text becomes unreadable. You need to simplify the layout, remove sidebars, and stack options in a single column. CSS media queries are those layout adjustments. They allow your website designs to adapt, resize, and morph automatically based on the user's screen width, providing a clean, responsive layout on desktops, tablets, and smartphones.

In this page:

Media Query Syntax
Mobile-First Design (min-width)
Desktop-First Design (max-width)
Common Device Breakpoints
Combining Multiple Media Conditions

Media Query Syntax

Media queries are conditional statements in CSS. They consist of a media type (like screen) and features (like min-width), allowing you to apply specific layout rules when the browser window crosses a defined pixel threshold.

Note: Always specify screen as your media type to target standard digital devices.

Warning: Make sure you include the required space between the and keyword and your query parentheses, or the browser will ignore the rule.

Example: Media Query Syntax

css

@media screen and (min-width: 768px) {
  .container {
    width: 720px;
  }
}

Mobile-First Design (min-width)

Mobile-first design is the industry standard workflow. You write your default styles for small mobile screens first, then use min-width queries to add layout columns and spacing as screen sizes expand.

Note: Using a mobile-first workflow results in lighter, cleaner, and faster stylesheets.

Warning: Failing to design mobile-first can make your pages slow to load on mobile connections due to heavy desktop assets loading first.

Example: Mobile-First Design (min-width)

css

.box {
  display: block;
}
@media (min-width: 768px) {
  .box {
    display: flex;
  }
}

Desktop-First Design (max-width)

Desktop-first design is an alternative workflow where you write your default styles for large desktop screens first, then use max-width queries to adjust, shrink, and stack elements as screen sizes shrink.

Note: Use max-width queries to adapt older, existing desktop websites for mobile screens.

Warning: Desktop-first workflows often require you to write complex code overrides to reset desktop styles on mobile.

Example: Desktop-First Design (max-width)

css

.box {
  display: flex;
}
@media (max-width: 768px) {
  .box {
    display: block;
  }
}

Common Device Breakpoints

To make your responsive designs consistent, you should align your media query breakpoints with standard, widely used device widths (like 480px for mobile, 768px for tablets, and 1024px for desktops).

Note: Focus on your content's layout breakpoints first, rather than trying to target specific phone models.

Warning: Ensure your breakpoints do not leave visual layout gaps where elements overlap on unusual screen sizes.

Example: Common Device Breakpoints

css

@media (min-width: 480px) { .box { padding: 12px; } }
@media (min-width: 768px) { .box { padding: 20px; } }
@media (min-width: 1024px) { .box { padding: 32px; } }

Combining Multiple Media Conditions

You can combine multiple media features using the and and comma (which acts like or) operators to target specific screen ranges (like devices between 600px and 900px wide).

Note: Use range queries to apply target styling rules specific to tablet displays without affecting mobile or desktop screens.

Warning: Ensure your range boundaries do not overlap, as it can cause contradictory styles to run on the same screen.

Example: Combining Multiple Media Conditions

css

@media (min-width: 600px) and (max-width: 900px) {
  .box {
    background: lightblue;
  }
}

Common Mistakes

Forgetting to write standard viewport meta configuration tags in your HTML headers, which breaks media query rendering on mobile devices.
Omitting required spaces between media condition keywords (e.g., writing and(min-width: 768px) without a space).
Using overlapping max-width and min-width boundaries on identical breakpoints, causing layout conflicts.

Chapter Summary

Media queries are conditional statements used to apply styling rules based on screen widths.
A mobile-first workflow uses min-width queries to adapt small layouts for larger screens elegantly.
Use common breakpoints (like 480px, 768px, and 1024px) to ensure layout consistency across all digital devices.

Browser Support

Standard CSS media queries and responsive display features are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Box Sizing Next Lesson → CSS Pointer Events