📡 @media — The Heart of Responsive CSS

🌐 What is @media?

@media is a CSS at-rule used to apply styles only when certain conditions (like screen width, orientation, resolution, or device type) are met. It is the core of responsive design, enabling layouts to adapt to different screens.

>>“@media makes your CSS react to the user’s device — not the other way around.”

🎯 Why Use @media?

  • 📱 Adjust layout for different screen sizes
  • 💻 Improve readability on large displays
  • 🌍 Make designs mobile-friendly
  • ⚙️ Apply conditional styling for orientation or dark mode
  • 🖥️ Optimize spacing, font sizes, and grids across breakpoints

📌 Basic Syntax

Basic @media Syntax

@media (condition) {
  /* CSS rules here */
}

🎯 Most Common Type — Width-Based Media Queries

👉 Max-width (Mobile-first responsive design)

max-width Example

@media (max-width: 768px) {
  .card {
    padding: 10px;
    font-size: 14px;
  }
}

Styles apply when the screen width is **768px or below**.

👉 Min-width (Progressive enhancement)

min-width Example

@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    padding: 40px;
  }
}

Styles apply when width is **1024px or above** — perfect for desktop enhancements.

📐 Common Breakpoints (Industry Standard)

Device TypeBreakpoint
Mobilemax-width: 480px
Small Tabletsmax-width: 768px
Large Tabletsmax-width: 1024px
Laptopsmin-width: 1200px

Note

💡 These breakpoints are **guidelines**, not rules. Base decisions on your layout — not specific devices.

🧠 Combining Conditions

👉 Width + Orientation

Orientation Example

@media (max-width: 768px) and (orientation: landscape) {
  .banner {
    height: 200px;
  }
}
👉 Dark Mode Detection

Dark Mode Media Query

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}
👉 High-Resolution Displays (Retina Screens)

High DPI Example

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url("logo@2x.png");
  }
}

🧪 Practical Example — Responsive Navigation

Responsive Navbar

.nav {
  display: flex;
  gap: 20px;
}

@media (max-width: 600px) {
  .nav {
    flex-direction: column;
    gap: 10px;
  }
}

Navbar switches from horizontal → vertical layout on mobile screens.

🔥 Practical Example — Responsive Grid

Responsive Grid with @media

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Grids shrink from 4 → 2 → 1 column based on device size.

📱 Mobile-First vs Desktop-First

ApproachUsesQuery Type
Mobile-FirstStart small, scale upmin-width
Desktop-FirstStart large, scale downmax-width

Note

💡 Modern CSS prefers mobile-first because it creates cleaner, efficient code.

⚠️ Common Mistakes

  • Using too many breakpoints — keep it simple
  • Using device-specific widths like 375px or 414px
  • Not testing on real devices or simulators
  • Writing contradictory min-width & max-width rules
  • Forgetting that @media applies after base styles

🔥 Summary

@media is the foundation of responsive design. By controlling styles based on screen size, orientation, resolution, and preferences, you can build interfaces that look great everywhere.

>>“Master @media, and your website becomes fully adaptable — truly responsive.”

Learn more →MDN Docs 📘