📐 CSS Media Queries Level 4 — Range Queries (Modern Syntax)

🌐 What Are CSS Level 4 Range Queries?

CSS Media Queries Level 4 introduced a **new, clean, and mathematical way** to write responsive breakpoints. These are called range queries because they let you compare viewport sizes using mathematical operators like < , <= , > , >=.

>>“Level 4 range queries make media queries readable — just like math.”

Note

🎉 Good news: All modern browsers support Level 4 range syntax!

🎯 Why Use Range Queries?

  • Cleaner, shorter, and more readable media queries
  • No more writing two separate queries for min-width + max-width
  • Acts like mathematical inequalities → easier to understand
  • Works with width, height, aspect-ratio, resolution, etc.

📌 Old Way vs New Way

PurposeOld SyntaxNew (Level 4) Syntax
Between 600px and 900px@media (min-width: 600px) and (max-width: 900px)@media (600px ≤ width ≤ 900px)
Above 1200px@media (min-width: 1200px)@media (width ≥ 1200px)
Below 500px@media (max-width: 500px)@media (width ≤ 500px)

Note

💡 Range syntax is **mathematically correct**, readable, and avoids duplication.

🎯 Syntax Format

Range Query Syntax

@media (<value> <operator> <feature> <operator> <value>) { ... }

Examples of operators:

  • < → less than
  • <= → less than or equal
  • > → greater than
  • >= → greater than or equal

🧪 Example 1 — Between Two Breakpoints

Between 600px and 1024px

@media (600px <= width <= 1024px) {
  .container {
    padding: 20px;
  }
}

Applies only when viewport width is **between 600 and 1024px**, inclusive.

🧪 Example 2 — Mobile Breakpoint

Below 480px

@media (width <= 480px) {
  .nav {
    flex-direction: column;
  }
}

🧪 Example 3 — Desktop Breakpoint

Above 1200px

@media (width >= 1200px) {
  .layout {
    max-width: 1100px;
  }
}

🧪 Example 4 — Aspect Ratio Range

Aspect Ratio Range

@media (3/4 <= aspect-ratio <= 16/9) {
  .video {
    border: 3px solid green;
  }
}

Works great for video layouts and responsive media.

🧠 More Examples of Allowed Forms

Single Comparison

Single Comparison

@media (width > 768px) { ... }
Reversed Order (also allowed)

Reversed Syntax

@media (768px < width) { ... }
Height Queries

Height Range

@media (400px <= height <= 800px) {
  .sidebar { display: block; }
}

📱 Real-World Example — Fully Responsive Layout

Full Range Query System

/* Mobile */
@media (width <= 600px) {
  .grid { grid-template-columns: 1fr; }
}

/* Tablet */
@media (600px < width <= 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

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

Clean, readable, scalable — no repeated min/max syntax.

⚠️ Common Mistakes

  • Trying to mix old and new syntax incorrectly
  • Assuming all browsers support it (older browsers do not)
  • Using commas instead of logical AND ranges

Note

✔ All major modern browsers (Chrome, Firefox, Safari, Edge) support range queries now.

🔥 Summary

CSS Level 4 Range Queries modernize the way we write responsive breakpoints. They give you a mathematical, readable, and intuitive way to define screen ranges without writing multiple media conditions.

>>“Range queries turn media queries into simple math — clean, powerful, future-proof.”

Learn more →MDN Docs 📘