Media Queries

Metadata

• 📅 Date :: 25-04-2025
• 🏷️ Tags :: web-dev

---

Notes

📱 Understanding Media Queries in Responsive Web Design

🌐 What Are Media Queries?

Media queries are a core concept in responsive web design, allowing web pages to adapt their layout and style based on the characteristics of the device they’re being viewed on. Instead of having a single static layout, websites can dynamically change styles based on the width, height, orientation, and type of device.

At the heart of a media query is the @media rule, which wraps CSS that should only apply under specific conditions.

---

🧠 Basic Syntax of Media Queries

@media (max-width: 600px) {
  h1 {
    font-size: 20px;
  }
}

🔍 What This Means:

• The CSS inside the media query will only apply when the screen width is 600px or less.

• In this case, when viewed on a mobile phone, the <h1> will shrink in size for better readability and layout.

---

📏 Understanding Breakpoints

A breakpoint is a specific screen width at which your layout or style should change to better suit the device.

For example:

• 0px to 480px: Phones (small screens)

• 481px to 1200px: Tablets (medium screens)

• 1201px to 1600px: Laptops

• 1601px and up: Desktops (large screens)

Breakpoints help you “break” your layout and adjust it for different device types.

---

✅ Common Media Query Conditions

There are two main keywords used in media queries:

1. max-width

This targets screens that are equal to or less than the specified width.

@media (max-width: 600px) {
  body {
    background-color: salmon;
  }
}

👉 This is often used to target smaller devices like mobile phones.

---

2. min-width

This targets screens that are equal to or greater than the specified width.

@media (min-width: 1601px) {
  body {
    background-color: seagreen;
  }
}

👉 Used for targeting larger screens like desktops.

---

🔄 Combining min-width and max-width

You can define a range by combining both:

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

🎯 This will only apply to screens between 481px and 1200px, typically tablets.

---

🎯 Targeting Specific Ranges (Examples)

Let’s say you want different background colors for different screen sizes:

/* Default (any size) */
body {
  background-color: aquamarine;
}
 
/* Mobile: 0px to 480px */
@media (max-width: 480px) {
  body {
    background-color: salmon;
}
 
/* Tablet: 481px to 1200px */
@media (min-width: 481px) and (max-width: 1200px) {
  body {
    background-color: powderblue;
}
 
/* Laptop: 1201px to 1600px */
@media (min-width: 1201px) and (max-width: 1600px) {
  body {
    background-color: limegreen;
}
 
/* Desktop: 1601px and above */
@media (min-width: 1601px) {
  body {
    background-color: seagreen;
}

---

📎 Optional: Media Types

You may see queries that include media types like screen or print:

@media screen and (max-width: 600px) { ... }
 
@media print {
  body {
    font-size: 12pt;
    color: black;
  }
}

• screen: Default for digital displays (monitors, phones, tablets)

• print: Used when printing the webpage

📌 Usually, you don’t need to include screen—but it’s useful when targeting multiple types.

---

🔧 Testing Media Queries

✅ Developer Tools (Chrome or any modern browser):

1. Right-click > Inspect or Ctrl+Shift+I / Cmd+Opt+I

2. Click the device toggle icon 📱

3. Choose a device or manually resize the viewport

4. Observe how styles change at breakpoints

This is one of the best tools for testing responsiveness.

---

💡 Best Practices for Using Media Queries

• Mobile First: Start styling for mobile, then scale up using min-width.

• Don’t Overdo Breakpoints: Use meaningful breakpoints where the design needs to change.

• Test on Real Devices when possible, in addition to emulators.

• Use Relative Units (like %, em, rem) instead of fixed pixels for smoother scaling.

---

🛠️ Practical Exercise Summary

Create a responsive website that changes the background color of the body depending on screen size:

Screen Type	Width Range	Color
Mobile	0 - 480px	Salmon
Tablet	481 - 1200px	Powderblue
Laptop	1201 - 1600px	Limegreen
Desktop	1601px+	Seagreen

You can implement this with four media queries using combinations of min-width and max-width.

---

🧭 Going Further

While min-width and max-width cover 90% of cases, media queries can also target:

• orientation: portrait or landscape

• resolution: For high-DPI screens (like Retina)

• aspect-ratio

• hover, pointer capabilities

• prefers-color-scheme: Light or dark mode preferences

Example:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: white;
  }
}

Check out MDN Web Docs: Using Media Queries for all supported features.

---

✅ Summary

• Media queries let your site respond to screen size, orientation, and more.

• Use max-width to target smaller devices and min-width for larger ones.

• Combine them to target specific ranges.

• Test your designs using Developer Tools.

• Mastering media queries is essential for modern, user-friendly web development.

---

References

• How to Create Responsive Websites

  solution