Mastering CSS Media Queries: The Ultimate Guide to Responsive Design

5 min readFeb 24, 2025

Let’s be honest — if your website doesn’t look good on all devices, it’s basically broken. Nobody enjoys zooming in and out on a phone just to read text, and let’s not even talk about sites that completely fall apart on different screens.

That’s where CSS Media Queries come in — your secret weapon to making a website look perfect on every screen size. Whether it’s a phone, tablet, laptop, or a giant 4K display, media queries let you tweak your design based on the user’s device.

So, let’s break it down without the boring textbook jargon.

CSS Media Queries Overview

Media queries allow you to apply CSS styles based on device characteristics like screen width, height, or orientation. They are crucial for responsive web design.

Basic Syntax

@media mediatype and (condition) {
    /* CSS rules */
}

Common Media Types (Where Do These Styles Apply?)

all — All devices
screen — Computer screens, tablets, phones
print — Printers
speech — Screen readers

In most cases, we just use screen because that’s where responsive design matters.

Common Breakpoints

But these aren’t strict rules — you can set your own based on your project.

Mobile First (min-width)

/* Small devices (phones) */
@media (min-width: 576px) {
    /* styles */
}

/* Medium devices (tablets) */
@media (min-width: 768px) {
    /* styles */
}

/* Large devices (desktops) */
@media (min-width: 992px) {
    /* styles */
}

Desktop First (max-width)

/* Large devices (desktops) */
@media (max-width: 992px) {
    /* styles */
}

/* Medium devices (tablets) */
@media (max-width: 768px) {
    /* styles */
}

/* Small devices (phones) */
@media (max-width: 576px) {
    /* styles */
}

Advanced Media Queries (More Than Just Screen Size!)

📐 1. Between Two Sizes (min-width + max-width)

/* Styles for screens between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
    /* styles */
}

Combine

/* Styles for screens below 600px and above 900px */
@media (max-width: 600px) and (min-width: 900px) {
    /* styles */
}

📱 2. Based on Device Orientation

Want different styles in portrait vs. landscape mode?

Great for mobile-friendly gaming UIs, dashboards, or full-screen apps.

@media (orientation: portrait) {
    body {
        background-color: violet;
    }
}

🎞 3. High-Resolution Screens (Retina, 4K, etc.)

Some styles look bad on super high-resolution screens (like retina displays).

@media (min-resolution: 300dpi) {
    body {
        font-size: 18px;
    }
}

🔲 4. Aspect Ratio (For Responsive Videos & Grids)

Want different layouts for wider or taller screens?

Useful for video players, grids, and UI elements that depend on screen shape.

@media (aspect-ratio: 16/9) {
    video {
        width: 100%;
    }
}

Examples

/* Portrait orientation */
@media (orientation: portrait) {
    /* styles */
}

/* High DPI devices */
@media (min-resolution: 300dpi) {
    /* styles */
}

/* Specific aspect ratio */
@media (aspect-ratio: 16/9) {
    /* styles */
}

Exampe code:

TODO: Change the background color for each device
[lightsalmon] Mobile Devices: 319px — 480px
[powderblue] iPads and Tablets: 481px — 1200px
[limegreen] Laptops: 1201px — 1600px
[seagreen] Desktops: 1601px and more

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

  <title>Document</title>
  <style>
    body {
      background-color: aquamarine;
    }

    @media (min-width: 319px) and (max-width: 480px) {
      body {
        background-color: lightsalmon;
      }
    }

    @media (min-width: 481px) and (max-width: 1200px) {
      body {
        background-color: powderblue;
      }
    }

    @media (min-width: 1201px) and (max-width: 1600px) {
      body {
        background-color: limegreen;
      }
    }

    @media (min-width: 1601px) {
      body {
        background-color: seagreen;
      }
    }
  </style>
</head>

<body>
</body>

</html>

Output:

Common Use Cases

/* Hide elements on small screens */
@media (max-width: 600px) {
    .desktop-only {
        display: none;
    }
}

/* Change layout on different screen sizes */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Adjust font sizes for readability */
@media (max-width: 400px) {
    body {
        font-size: 14px;
    }
}

Best Practices for Media Queries

✔ Test on multiple devices → Don’t just rely on resizing your browser window.
✔ Use relative units (em, rem, %) → Avoid hardcoding pixel values.
✔ Keep breakpoints consistent → Standardize them across your project.

Final Thoughts

Mastering media queries isn’t optional anymore — every website today needs to be responsive. The key is to start small (mobile-first), test often, and keep things consistent.

If you’re new to media queries, start by tweaking existing projects instead of building from scratch. Resize your browser, play around with breakpoints, and see how small changes can make a huge impact.

Got any cool media query tricks? Drop them in the comments! 🚀

TL;DR (Too Long; Didn’t Read)

✔ Media queries adapt styles based on screen size, orientation, or resolution.
✔ Use mobile-first (min-width) for better scalability.
✔ Stick to standard breakpoints for consistency.
✔ Test across real devices, not just browser resizes.

Happy coding!💻