Frontend Hub/CSS Course
Bài học: CSS Responsive Design

Course Content

CSS Fundamentals

Layout Cơ Bản

Responsive Design

📱 CSS Media Queries & Responsive Design

Học cách tạo website responsive với Media Queries - từ mobile đến desktop, tất cả đều hoàn hảo!

💡 Responsive Design giúp website hiển thị đẹp trên mọi thiết bị, từ điện thoại đến máy tính.

📏 Standard Breakpoints:

• Mobile: 0px - 575px
• Small tablet: 576px+
• Tablet: 768px+
• Desktop: 992px+
• Large desktop: 1200px+
• Extra large: 1400px+

Mobile-first Breakpoints

/* Mobile First Breakpoints */
/* Base styles - Mobile (0px+) */
.container {
  padding: 16px;
  font-size: 14px;
}

/* Small tablets (576px+) */
@media (min-width: 576px) {
  .container {
    padding: 20px;
    font-size: 16px;
  }
}

/* Tablets (768px+) */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 750px;
    margin: 0 auto;
  }
}

/* Desktop (992px+) */
@media (min-width: 992px) {
  .container {
    max-width: 970px;
    padding: 32px;
  }
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

🎯 Responsive Best Practices

✅ Do's

  • • Luôn dùng mobile-first approach
  • • Test trên thiết bị thật
  • • Tối ưu images cho từng breakpoint
  • • Dùng relative units (rem, em, %)
  • • Progressive enhancement

❌ Don'ts

  • • Không quên viewport meta tag
  • • Tránh quá nhiều breakpoints
  • • Không hardcode pixel values
  • • Tránh desktop-first mindset
  • • Không test chỉ trên browser

📋 Media Queries Cheat Sheet

Common Breakpoints

@media (min-width: 576px) - Small
@media (min-width: 768px) - Medium
@media (min-width: 992px) - Large
@media (min-width: 1200px) - XL

Essential Patterns

max-width: 100% - Responsive images
clamp(1rem, 4vw, 2rem) - Fluid typography
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))

Media Queries là chìa khóa cho responsive design hoàn hảo! 🚀