📱 Lesson 12: Responsive Design and Media Queries

In a world of phones, tablets, laptops, and ultrawide monitors, your site needs to adapt to all screen sizes. This is what responsive design is all about, making your layout flexible and user-friendly across any device.

1. Why Responsive Design Matters

Improves user experience across devices
Essential for mobile-first design
Better SEO (Google favors mobile-friendly sites)

2. What Are Media Queries?

Media queries allow you to apply CSS styles based on the device’s characteristics like screen width, height, orientation, and resolution.

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

This example targets screens that are 600px wide or smaller. Perfect for small smartphones.

3. Use Flexible Units

Avoid fixed units like px whenever possible. Instead, use these:

% – relative to parent container
em / rem – relative to font size
vw / vh – relative to viewport width/height

4. Building a Responsive Layout

Here’s a basic responsive layout using media queries and flexible units:

.container {
  width: 80%;
  margin: auto;
}

@media (max-width: 768px) {
  .container {
    width: 95%;
  }
}

This keeps your container neat on big screens, and gives it more breathing room on smaller ones.

⚡ Pro Tips

Always start mobile-first: style for small screens, then scale up
Use breakpoints around: 480px, 768px, 1024px, 1280px
Test on real devices, not just browser resizing
Combine media queries with Flexbox/Grid for maximum adaptability

✅ Recap

Responsive design ensures your site looks good everywhere
Media queries adapt styles based on screen conditions
Flexible units help your layout adjust smoothly
Mobile-first design is a modern best practice

Mastering responsive design is non-negotiable for any serious frontend developer. Up next, let’s dive into Git and Version control

Lessons