Bài đọc

Responsive và ảnh: tình huống lỗi và cách chẩn đoán

3 phút đọc

Đây là bài 4 của chương 6: Responsive và ảnh, thuộc khóa demo HTML & CSS. Nội dung được dùng để trải nghiệm cấu trúc chương trình học; hãy thực hành trên dữ liệu và môi trường thử nghiệm riêng. Trong dự án xuyên suốt, bạn sẽ xây dựng website giới thiệu khóa học có trang chủ, danh sách bài học và biểu mẫu đăng ký.

Mục tiêu cụ thể

Thiết kế từ màn hình nhỏ bắt đầu bằng bố cục cơ bản dễ đọc, sau đó mở rộng khi có đủ chỗ. Ảnh cần kích thước hợp lý, alt phù hợp và tránh làm dịch chuyển bố cục khi tải.

Tình huống lỗi

Ẩn nội dung quan trọng ở mobile để dễ dàn trang làm mất chức năng. Không dùng ảnh gốc rất lớn chỉ để hiển thị một thumbnail nhỏ.

Chẩn đoán có bằng chứng

Trong bài responsive và ảnh, hãy cố ý tái hiện tình huống trên ở môi trường thử nghiệm. Mục tiêu là thấy vì sao kết quả sai và thu thập đủ bằng chứng để phân biệt lỗi dữ liệu, lỗi quy tắc và lỗi cấu hình. Không sửa đồng thời nhiều yếu tố vì bạn sẽ khó xác định nguyên nhân.

Ghi rõ bước thao tác và kết quả mong đợi.
Thu nhỏ ví dụ đến mức vẫn tái hiện được lỗi.
Đối chiếu dữ liệu thực với giả định ban đầu.
Đặt giả thuyết và thay đổi một yếu tố.
Xác nhận bằng cách tái chạy ví dụ tối thiểu.

Mẫu đối chiếu

<img src="course.jpg" alt="Bìa khóa học HTML và CSS" width="800" height="450" style="max-width:100%;height:auto">
<style>
.container { width: min(100% - 32px, 1120px); margin-inline: auto; }
@media (min-width: 768px) { .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } }
</style>

Kiểm tra sau sửa

Ảnh giữ tỷ lệ gốc
Nội dung không cần zoom để đọc
Không có thanh cuộn ngang

Khi lỗi biến mất, thực hiện lại yêu cầu gốc: Tối ưu hero của trang giới thiệu cho 320px, 768px và 1280px; ghi lại điều gì thay đổi ở mỗi kích thước. Sau đó thử trường hợp đầu vào rỗng hoặc trạng thái chưa được khởi tạo nếu phù hợp. Một bản sửa phải khôi phục hành vi đã định nghĩa, không chỉ làm mất thông báo lỗi.

Ghi chú bàn giao