Responsive Web Design: Ý nghĩa và ứng dụng

Responsive Web Design (RWD) là phương pháp thiết kế web khiến trang web tự động thích ứng giao diện, layout và chức năng trên mọi kích thước màn hình: mobile, tablet, laptop, desktop, TV.

Tại sao cần RWD?

Trải nghiệm người dùng: Đọc dễ dàng, không zoom ngang, touch-friendly
SEO: Google ưu tiên mobile-first indexing
Chi phí: Một codebase cho mọi thiết bị (thay vì site mobile riêng)
Chuyển đổi: Tăng conversion rate trên mobile
Bảo trì: Dễ dàng cập nhật, nhất quán

3 trụ cột kỹ thuật của RWD

Kỹ thuật	Mô tả	Ví dụ
Fluid Grid	Layout dùng đơn vị %/fr/rem, không dùng px cố định	`width: 100%; max-width: 1200px`
Flexible Images	Ảnh/media scale theo container	`max-width: 100%; height: auto`
Media Queries	CSS điều kiện theo breakpoint	`@media (max-width: 768px) {...}`

Breakpoints phổ biến (Mobile-first)

/ * Mobile first: base styles cho mobile * /
.container { padding: 1rem; }

/* Tablet: ≥ 768px */
@media (min-width: 768px) {
  .container { padding: 2rem; }
  .grid { grid-template-columns: 1fr 1fr; }
}

/* Desktop: ≥ 1024px */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Large Desktop: ≥ 1440px */
@media (min-width: 1440px) {
  .container { max-width: 1400px; }
}

Modern CSS cho RWD (2024+)

Container Queries: @container (min-width: 400px) - responsive theo container, không phải viewport
CSS Grid: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))
Flexbox: flex: 1 1 300px cho flexible items
clamp(): font-size: clamp(1rem, 2vw + 0.5rem, 2rem) cho typography
aspect-ratio: Giữ tỷ lệ khung hình không cần padding hack
logical properties: margin-inline, padding-block cho RTL/LTR

Testing RWD

Chrome DevTools Device Toolbar (Ctrl+Shift+M)
Responsive Design Mode Firefox
Thiết bị thật (iOS Safari, Android Chrome)
Lighthouse audit: Performance, Accessibility, Best Practices, SEO