Media Queries

🎯 Deep Dive into Media Queries

When building a responsive website, there are many methods you can use, but Media Queries are the most basic and popular approach.

---

🔹 How Do Media Queries Work?

In CSS, we use the @media keyword to apply specific styles under certain conditions, also called breakpoints.

👉 Example: If the screen width is 600px or less, we can apply different CSS rules.

Imagine an h1 that looks perfect on desktop but is too large on mobile screens. With Media Queries, you can reduce the font size for smaller screens.

---

🔹 Demo Example

Suppose you have a div with a 200px height and 200px width and a blue background.

Now, using a Media Query:

@media (max-width: 600px) {
  div {
    width: 100px;
    height: 100px;
  }
}

👉 Meaning: If the screen width is 600px or smaller, the div will shrink to 100x100px.
This way, you can create different layouts for smaller devices.

---

🔹 max-width vs min-width

max-width:

• Condition: Apply styles when the screen is below or equal to a certain width.

• Example: max-width: 600px → Style applies on screens 600px or smaller (mobile devices).

min-width:

• Condition: Apply styles when the screen is above or equal to a certain width.

• Example: min-width: 600px → Style applies on screens 600px or larger (tablets, desktops).

👉 Simple way to remember:

• max-width → smaller devices

• min-width → larger devices

---

🔹 Breakpoint Range (Multiple Conditions)

You can also combine conditions with and.

@media (min-width: 600px) and (max-width: 900px) {
  body {
    background: yellow;
  }
}

👉 Meaning: When the screen width is between 600px and 900px, the body background will be yellow.

This allows you to target specific ranges of screen sizes.

---

🔹 screen vs print

Sometimes you’ll see screen written inside a Media Query.

• screen → for normal devices (mobile, laptop, desktop).

• print → for controlling how the website looks when printed.

👉 For regular responsive design, you don’t need to write screen. But if you want a special print layout, use print.

---

🔹 Common Device Breakpoints

Here are some commonly used breakpoints:

✅ Mobile: 319px – 480px
✅ Tablet / iPad: 481px – 1200px
✅ Laptop: 1201px – 1600px
✅ Desktop: 1601px and above

👉 Example code:

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

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

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

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

Now, when you resize the browser window, the body background color will change depending on the screen size.

---

🔹 How to Test Responsiveness?

Use Chrome Developer Tools → Device Toolbar (shortcut: Ctrl + Shift + I → Toggle Device Toolbar).
From there, you can test different devices like iPhone, iPad, or custom screen sizes.

---

✅ Key Takeaways

• Media Queries = the foundation of responsive design.

• max-width → smaller screens, min-width → larger screens.

• Combine multiple conditions to target a specific range.

• Use breakpoints for Mobile, Tablet, Laptop, Desktop to write different CSS for each.

---

✨ With Media Queries, you can make your website look great across all devices!