Bài 23: Thiết kế responsive – Bố cục co giãn cho mọi thiết bị

Media Queries là công cụ, còn thiết kế responsive là tư duy.

Responsive không chỉ là “nhét CSS cho mobile”, mà là làm sao để bố cục linh hoạt, dễ đọc, dễ dùng ở mọi kích thước: từ điện thoại nhỏ xíu đến màn hình máy tính lớn.

Trong bài này, bạn sẽ:

• Xây dựng bố cục thay đổi theo kích thước
• Ứng dụng Flexbox, Grid kết hợp với media query
• Làm layout 3 cột chuyển thành 1 cột trên điện thoại
• Học tư duy thiết kế mobile-first và desktop-first

---

1. Responsive là gì?

Responsive Design là thiết kế giúp giao diện web tự điều chỉnh bố cục, kích thước, font, hình ảnh… để hiển thị tốt nhất trên từng loại thiết bị.

Một website responsive tốt sẽ:

• Không cần zoom khi xem trên điện thoại
• Các nút to rõ, dễ nhấn
• Văn bản dễ đọc, bố cục hợp lý

---

2. Ví dụ: Layout 3 cột → 1 cột

HTML:

📋 Copy<div class="row">
  <div class="col">Cột 1</div>
  <div class="col">Cột 2</div>
  <div class="col">Cột 3</div>
</div>

CSS:

📋 Copy.row {
  display: flex;
  gap: 20px;
}

.col {
  flex: 1;
  padding: 20px;
  background: #f1c40f;
  text-align: center;
  font-weight: bold;
}

/* Mobile: chuyển về 1 cột */
@media (max-width: 768px) {
  .row {
    flex-direction: column;
  }
}

→ Trên desktop: 3 cột ngang
→ Trên điện thoại: các cột xếp dọc

---

3. Grid responsive layout

HTML:

📋 Copy<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS:

📋 Copy.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.item {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
}

/* Dưới 768px → 2 cột */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Dưới 480px → 1 cột */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

---

4. Chiến lược Mobile-first vs Desktop-first

a. Mobile-first

Viết CSS mặc định cho mobile → thêm media query min-width cho màn hình lớn

📋 Copy/* Mặc định: điện thoại */
.container { padding: 10px; }

/* Lớn hơn 768px: tablet trở lên */
@media (min-width: 768px) {
  .container { padding: 30px; }
}

b. Desktop-first

Viết CSS mặc định cho desktop → dùng max-width cho thiết bị nhỏ

📋 Copy/* Mặc định: desktop */
.container { padding: 30px; }

/* Dưới 768px: điện thoại */
@media (max-width: 768px) {
  .container { padding: 10px; }
}

→ Cách nào cũng đúng. Nhiều frontend hiện nay khuyên Mobile-first để tối ưu cho người dùng điện thoại.

---

5. Responsive font và hình ảnh

📋 Copyh1 {
  font-size: clamp(24px, 4vw, 48px);
}

• clamp(min, preferred, max) → co giãn hợp lý
• vw: theo chiều rộng màn hình

Hình ảnh:

📋 Copyimg {
  width: 100%;
  height: auto;
}

→ Giúp ảnh không tràn ra ngoài khi trên màn hình nhỏ.

---

6. Ghi nhớ

Thành phần	Vai trò chính
@media	Áp dụng CSS theo kích thước màn hình
flex	Dễ xếp cột, chuyển thành dọc khi cần
grid	Quản lý bố cục 2 chiều
clamp, vw	Làm font chữ responsive
img responsive	Dùng width: 100%; height: auto;