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

Syntax

css

@media media-type and (condition) {
  selector {
    property: value;
  }
}

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

<style>
@media screen and (min-width: 768px) {
  .container {
    width: 720px;
  }
}
</style>
<div class="container" style="background:#cde; border:1px solid #369">Width becomes 720px at 768px+ viewports.</div>

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

<style>
.box {
  display: block;
}
@media (min-width: 768px) {
  .box {
    display: flex;
  }
}
</style>
<div class="box" style="background:#cde"><div style="background:#fdc; padding:8px">A</div><div style="background:#cfc; padding:8px">B</div></div>

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

<style>
.box {
  display: flex;
}
@media (max-width: 768px) {
  .box {
    display: block;
  }
}
</style>
<div class="box" style="background:#cde"><div style="background:#fdc; padding:8px">A</div><div style="background:#cfc; padding:8px">B</div></div>

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

<style>
@media (min-width: 480px) { .box { padding: 12px; } }
@media (min-width: 768px) { .box { padding: 20px; } }
@media (min-width: 1024px) { .box { padding: 32px; } }
</style>
<div class="box" style="background:#cde; border:1px solid #369">Padding grows as the viewport widens.</div>

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

<style>
@media (min-width: 600px) and (max-width: 900px) {
  .box {
    background: lightblue;
  }
}
</style>
<div class="box" style="border:1px solid #369; padding:12px">Light blue only between 600px and 900px wide.</div>

Live Example

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