CSS Media Queries for Responsive Design

Today’s web users browse on devices of all sizes – phones, tablets, laptops, desktops, and even TVs. To make sure your website looks good everywhere, you need responsive design. That’s where CSS media queries come in.

What Are Media Queries?

Media queries allow you to apply CSS styles based on device conditions, like screen width, height, orientation, or resolution. This makes your layout adapt to different devices.

Syntax:

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

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

Basic Media Query Example

body {
  font-size: 16px;
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

body {
  font-size: 16px;
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

👉 On screens 600px wide or smaller, the font size will shrink to 14px.

Common Media Query Conditions

• max-width → Apply styles for devices up to a certain width.
• min-width → Apply styles for devices starting from a certain width.
• orientation → Detect portrait or landscape.
• resolution → Detect screen resolution (useful for high-DPI devices).

Example:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (orientation: landscape) {
  body {
    background: lightblue;
  }
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (orientation: landscape) {
  body {
    background: lightblue;
  }
}

Mobile-First vs. Desktop-First Approach

• Mobile-first → Start with base styles for small screens, then add min-width queries for larger screens. (Recommended)
• Desktop-first → Start with large screens, then add max-width queries for smaller screens.

Example (Mobile-first):

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1100px;
  }
}

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1100px;
  }
}

Combining Multiple Conditions

You can combine conditions with and.

@media (min-width: 600px) and (orientation: portrait) {
  body {
    background: lightgreen;
  }
}

@media (min-width: 600px) and (orientation: portrait) {
  body {
    background: lightgreen;
  }
}

Responsive Images and Text

Media queries can resize images and adjust text for readability.

img {
  width: 100%;
}

@media (min-width: 768px) {
  img {
    width: 50%;
  }
}

img {
  width: 100%;
}

@media (min-width: 768px) {
  img {
    width: 50%;
  }
}

Common Mistakes Beginners Make

1. Using too many breakpoints → keep it simple.
2. Forgetting mobile-first design.
3. Not testing across real devices.
4. Overusing px instead of flexible units like % or rem.

Quick Reference Summary

Practice Challenge

1. Create a responsive container:
   • width: 100% on mobile
   • 750px on tablets (min-width: 768px)
   • 1100px on desktops (min-width: 1200px)
2. Change background color of the page in portrait mode.
3. Make images full width on mobile, half width on desktop.

Conclusion

CSS media queries are the foundation of responsive design. By adjusting layouts for different devices, you ensure your site is user-friendly everywhere – from small phones to large desktop screens.