Responsive Design with CSS3 Media Queries

📱 CSS3 Media Queries for Responsive Design

Media queries are a cornerstone of responsive web design, enabling styles to adapt to various device characteristics.

🧪 Basic Media Query Example

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
}

✅ Applies styles only when the screen width is 768px or less.

📐 Common Media Query Features

• min-width / max-width: screen size
• orientation: portrait or landscape
• resolution: pixel density

📏 Combine with Flexible Units

Use %, vw, vh, em, and rem for scalable layouts:

.container {
  width: 90vw;
  padding: 2em;
}

🧱 Example: Responsive Layout Shift

/* Desktop */
@media (min-width: 1024px) {
  .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .content {
    display: block;
  }
}

✅ Switches from two columns to a single column on smaller screens.

🎯 Benefits of Responsive Design

• 🔓 Improves accessibility
• 🤝 Enhances user experience
• 🔍 Boosts SEO performance
• 📱 Optimizes content for all device sizes

Mastering media queries ensures your websites are flexible, accessible, and device-friendly.