Bài đọc

Responsive và ảnh: nền tảng và mô hình tư duy

3 phút đọc

Đây là bài 1 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.

Hiểu vấn đề trước khi dùng công cụ

Chương này tập trung vào một quyết định cụ thể: 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. Đừng bắt đầu bằng cách chép nguyên ví dụ. Hãy chỉ ra thành phần nào là dữ liệu, thành phần nào là quy tắc và đâu là kết quả quan sát được. Một giải pháp đúng với dữ liệu mẫu vẫn có thể sai khi đầu vào rỗng, kích thước lớn hơn hoặc có hai thao tác xảy ra gần nhau.

Ví dụ tối thiể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>

Giới hạn cần hiểu

Ẩ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ỏ.

Câu hỏi để tự giải thích

Bạn sẽ giải thích responsive và ảnh cho người mới bằng ví dụ nào?
Phần nào của ví dụ là giả định, phần nào cần kiểm tra bằng thực nghiệm?
Nếu bỏ một điều kiện quan trọng, kết quả sẽ sai ở đâu?

Kết quả cần đạt

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