📱 Day 20 : Responsive Design & Media Queries

on

📱 Day 20 — Responsive Design & Media Queries

Welcome to Day 20! 🎯 Modern web design is no longer about how your site looks on a desktop — it’s about how it *adapts* to every screen. From smartphones and tablets to widescreen monitors, **Responsive Design** ensures your layout always looks right. Today you’ll learn how to use **CSS Media Queries** and fluid layouts to make your pages fully responsive.

🌍 1️⃣ What Is Responsive Design?

Responsive design is a technique where a website’s layout and elements automatically adjust based on the user’s device or screen size. It removes the need for multiple versions of the same site.

Key Goals:

  • ✅ Readable text without zooming
  • ✅ Flexible images and layouts
  • ✅ Easy navigation on all devices

🧩 2️⃣ The Viewport Meta Tag

Add this tag inside your HTML <head> to control how content scales on mobile devices. 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

📏 3️⃣ Fluid Layouts Using Percentages

Instead of using fixed pixel widths, use relative units like percentages or viewport width (vw). 

.container {
  width: 90%;
  margin: auto;
}
img {
  width: 100%;
  height: auto;
}

🧭 4️⃣ CSS Media Queries — The Core of Responsiveness

Media queries apply styles only under certain conditions (like screen width or orientation). 

@media (max-width: 768px) {
  body {
    background-color: #fff3e0;
  }
  .container {
    flex-direction: column;
  }
}
  • max-width: triggers when screen width is less than given value
  • min-width: triggers when screen width is larger than given value

🎨 5️⃣ Common Breakpoints

/* Large screens (desktop) */
@media (min-width: 1200px) { }

/* Medium screens (tablets) */
@media (max-width: 992px) { }

/* Small screens (mobiles) */
@media (max-width: 600px) { }

🧱 6️⃣ Responsive Navbar Example

nav {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: #ff8f00;
}
nav ul {
  display: flex;
  gap: 15px;
}
@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }
}

🧠 7️⃣ Mobile-First Design Approach

Design for small screens first, then add styles for larger devices. This ensures performance and simplicity. 

/* Base (mobile) */
.container { flex-direction: column; }

/* Larger screens */
@media (min-width: 768px) {
  .container { flex-direction: row; }
}

🧩 8️⃣ Responsive Images

Use max-width:100% to ensure images scale within their containers.

🧮 9️⃣ Practice Task

  1. Make a two-column layout that becomes one column on mobile.
  2. Change text color based on screen width.
  3. Create a responsive image gallery with grid or flex.

🧮 Mini Quiz

  • Q1: What is the purpose of the viewport tag?
  • Q2: How do media queries detect screen sizes?
  • Q3: What is the difference between min-width and max-width?

🎯 Summary

Responsive design ensures your site looks professional on all devices. Combine fluid layouts, flexible images, and media queries for the best results. Tomorrow, we’ll wrap up this series with a **complete Responsive Landing Page Project** using all the concepts you’ve learned.

Comments

Post a Comment