13. How to Use Media Queries for Responsive Web Design

Hey there!

In today’s multi-device world, your website needs to look great and work smoothly on screens of all sizes — from giant desktop monitors to tiny smartphones. That’s where media queries come in: a powerful CSS feature that helps you create responsive designs by applying different styles depending on the device’s screen size, resolution, or orientation.

In this post, we’ll explain what media queries are, show you how to write them, and guide you through practical examples so you can start making your websites truly responsive.

Ready to master responsiveness? Let’s go!

1. What Are Media Queries?

Media queries allow you to apply CSS styles conditionally based on characteristics of the device or viewport, such as:

Width and height of the viewport
Device resolution
Orientation (portrait or landscape)
Aspect ratio
And more!

By targeting these properties, you can tailor your layout and styling for different devices.

2. Basic Syntax of Media Queries

A media query looks like this:

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

Example:

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

This applies the background color only when the viewport width is 768 pixels or less.

3. Common Media Query Conditions

a. Width-based Queries

max-width: applies styles when viewport width is less than or equal to a value.
min-width: applies styles when viewport width is greater than or equal to a value.

@media (max-width: 600px) { /* mobile styles */ }
@media (min-width: 601px) { /* tablet and up */ }

b. Orientation

Detects whether the device is in landscape or portrait mode:

@media (orientation: portrait) { ... }
@media (orientation: landscape) { ... }

c. Resolution (for retina screens, for example)

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }

4. Practical Example: Responsive Navigation

Let’s create a navigation bar that changes from horizontal on desktop to vertical on mobile.

<nav class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

.navbar {
  display: flex;
  background-color: #333;
  padding: 10px;
  justify-content: center;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
}

@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    align-items: center;
  }

  .navbar a {
    padding: 15px;
    border-top: 1px solid #555;
    width: 100%;
    text-align: center;
  }
}

How it works:

Above 600px width, the nav links are side-by-side (row).
Below 600px, nav links stack vertically and stretch full width for easier tapping.

5. Using Multiple Conditions

You can combine multiple conditions with logical operators:

and — all conditions must be true
, (comma) — OR operator (applies if any condition is true)
not — negates a condition

Example:

`@media (min-width: 601px) and (max-width: 1024px) {
  /* styles for tablets */
}

6. Mobile-First vs Desktop-First Approach

Mobile-First

Write base styles for mobile, then use min-width media queries for larger screens.

/* Base mobile styles */
.container {
  padding: 10px;
}

/* Tablets and up */
@media (min-width: 600px) {
  .container {
    padding: 20px;
  }
}

Desktop-First

Write base styles for desktop, then use max-width media queries for smaller screens.

7. Practical Responsive Layout Example: Cards Grid

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

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

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

This example shrinks the number of columns based on screen width for better readability.

8. Tips for Using Media Queries Effectively

Use relative units (em, rem) instead of fixed pixels inside queries for flexibility.
Combine media queries with flexible CSS units like % or fr (in Grid/Flexbox).
Test your site on real devices or use browser dev tools device simulators.
Keep your queries organized — group related breakpoints together.
Avoid overly many breakpoints; aim for simplicity and clarity.

9. Summary

What you learned:

Media queries enable responsive designs by conditionally applying CSS based on device characteristics.
Use min-width and max-width to target different screen sizes.
Combine conditions for precise control.
Mobile-first design is a popular approach that starts styling for small screens.
Media queries work great with modern layout tools like Flexbox and Grid.

Mastering media queries is essential for crafting modern, user-friendly websites. Keep practicing and your designs will shine on every screen!

Until next time — stay responsive!