Thiết kế đáp ứng và ưu tiên thiết bị di động trong phát triển frontend với AI

🔄 Tóm tắt bài học: Trong bài học trước, bạn đã xây dựng các thành phần UI — thẻ, cửa sổ pop-up và menu drop-down với hỗ trợ bàn phím và khả năng truy cập. Bây giờ, hãy làm cho mọi thứ hoạt động đẹp mắt trên mọi kích thước màn hình.

Thiết kế đáp ứng đảm bảo giao diện của bạn hoạt động từ điện thoại 320px đến màn hình 4K. Với lưu lượng truy cập di động vượt qua desktop trên toàn hệ thống, thiết kế ưu tiên di động không phải là tùy chọn — mà là điểm khởi đầu mặc định.

CSS ưu tiên di động

Viết các kiểu cơ bản cho thiết bị di động, sau đó thêm độ phức tạp cho màn hình lớn hơn:

📍 Nơi dán: Mở ChatGPT (chat.openai.com), Claude (claude.ai) hoặc Gemini (gemini.google.com) và bắt đầu một cuộc trò chuyện mới.

/* Base: mobile (no media query needed) */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* Tablet */
@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

📋 Cách sao chép prompt này: Nhấp vào bất kỳ đâu bên trong khối màu xám, nhấn Cmd+A rồi Cmd+C (Mac) hoặc Ctrl+A rồi Ctrl+C (Windows). Hoặc sử dụng biểu tượng sao chép xuất hiện.

👀 Bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đây là bản nháp, không phải là câu trả lời cuối cùng.

Các breakpoint phổ biến (chiều rộng tối thiểu, ưu tiên thiết bị di động):

Chỉnh sửa kiểu chữ linh hoạt với hàm clamp()

Thay thế kích thước phông chữ cố định bằng khả năng điều chỉnh kích thước linh hoạt:

✏️ Cách điền thông tin chi tiết: Thay thế mỗi dấu ngoặc vuông [] và trình giữ chỗ trong ngoặc bằng thông tin cụ thể từ tình huống thực tế của bạn. Thông tin đầu vào mơ hồ sẽ tạo ra kết quả mơ hồ — hãy cụ thể.

👀 Những gì bạn sẽ thấy: Trong vòng vài giây, AI sẽ trả về một phản hồi có cấu trúc dựa vào prompt ở trên. Hãy đọc kỹ và coi đó là bản nháp, không phải câu trả lời cuối cùng.

📌 Cách xử lý kết quả: Lưu phản hồi vào file Notes. Chọn gợi ý có hiệu quả cao nhất và thực hiện nó trong tuần này — đừng cố gắng làm tất cả cùng một lúc.

⚠️ Nếu kết quả không ổn: Nếu các gợi ý có vẻ chung chung, hãy dán nội dung sau: "Hãy cụ thể hơn với ngữ cảnh thực tế của tôi. Bỏ qua lời khuyên chung chung." Nếu nó bỏ qua các chi tiết quan trọng bạn đã cung cấp, hãy nói: "Bạn đã bỏ sót [X] trong ngữ cảnh của tôi — hãy thực hiện lại với điều đó làm ràng buộc chính."

css
:root {
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

Prompt AI cho kiểu chữ linh hoạt:

Tạo tỷ lệ kiểu chữ linh hoạt bằng cách sử dụng clamp(). Yêu cầu: (1) Văn bản chính: tối thiểu 16px trên màn hình 320px, tối đa 18px trên màn hình 1400px, (2) Tiêu đề h1-h4: được zoom theo tỷ lệ, (3) Văn bản nhỏ (chú thích): tối thiểu 12px, tối đa 14px. Sử dụng đơn vị rem. Hãy cung cấp các giá trị của hàm clamp() và giải thích cách tính toán.

Hình ảnh đáp ứng

Phần tử <picture> với tối ưu hóa định dạng và kích thước:

<picture>
  <source
    type="image/webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
  />
  <img
    src="hero-800.jpg"
    srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 800px"
    alt="Descriptive alt text"
    width="1600" height="900"
    loading="lazy"
  />
</picture>

Danh sách kiểm tra tối ưu hóa hình ảnh:

Các mẫu đáp ứng

✅ Kiểm tra nhanh: Bạn đặt thuộc tính width: 100vw cho một container để làm cho nó có chiều rộng đầy đủ. Trên thiết bị di động, có thanh cuộn ngang. Tại sao?

Câu trả lời: 100vw bao gồm chiều rộng của thanh cuộn, trong khi 100% của phần thân trang thì không. Trên các trang có thanh cuộn dọc, 100vw rộng hơn vùng hiển thị, gây ra hiện tượng tràn ngang. Cách khắc phục: sử dụng width: 100% thay vì 100vw, hoặc thêm overflow-x: hidden vào phần thân trang. CSS do AI tạo ra thường sử dụng 100vw — luôn kiểm tra vấn đề này.

Kiểm tra thiết kế đáp ứng

Prompt AI để gỡ lỗi đáp ứng:

Tôi đang kiểm tra trang của mình ở các kích thước màn hình khác nhau. Ở chiều rộng 768px, thanh bên chồng lên nội dung chính và các liên kết điều hướng bị xuống dòng thành hai dòng. Đây là CSS của tôi: [DÁN]. Hãy gỡ lỗi hành vi đáp ứng và đề xuất cách khắc phục cho cả hai vấn đề.

Danh sách kiểm tra:

Những điểm chính cần ghi nhớ

• CSS ưu tiên thiết bị di động (truy vấn media min-width) tạo ra code sạch hơn, hiệu quả hơn: kiểu dáng dành cho thiết bị di động là mặc định mà không cần truy vấn media, và bạn tăng dần độ phức tạp bố cục cho màn hình lớn hơn — người dùng di động có kết nối chậm sẽ tải xuống lượng CSS tối thiểu cần thiết
• Kiểu chữ linh hoạt với clamp() loại bỏ các truy vấn media kích thước phông chữ dựa trên breakpoint: clamp(min, preferred, max) tạo ra khả năng mở rộng mượt mà giữa kích thước tối thiểu và tối đa, thích ứng với mọi viewport mà không bị gián đoạn hoặc ngắt thủ công
• Hình ảnh đáp ứng với srcset, sizes và định dạng WebP có thể giảm 90% lượng tải xuống hình ảnh trên thiết bị di động: điện thoại tải xuống file WebP 50KB thay vì file JPEG 2MB trên desktop — luôn đặt thuộc tính chiều rộng và chiều cao rõ ràng để ngăn chặn sự thay đổi bố cục (CLS)