Bạn sẽ xử lý các thành phần hay gây lỗi responsive: menu dài, ảnh rộng, bảng nhiều cột và chuỗi không ngắt. Mục tiêu là giữ đủ nội dung thay vì che những phần tràn khỏi màn hình.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Menu cần dùng được mà không có giả định về chuột

Với website nhỏ, menu có thể xuống dòng hoặc chuyển thành cột. Không bắt buộc phải có hamburger. Nếu ẩn toàn bộ nav nhưng chưa có nút và hành vi mở, bạn đã làm mất điều hướng cho một nhóm người dùng.

Giữ vùng bấm đủ rộng, không dồn liên kết sát nhau. Hover có thể không tồn tại theo cùng cách trên thiết bị cảm ứng, nên đừng yêu cầu hover để thấy đường dẫn thiết yếu.

Ảnh co lại nhưng vẫn giữ thông tin

Giữ max-width:100% và height:auto cho ảnh nội dung. Với card dùng cover, kiểm tra vùng cắt khi đổi tỷ lệ. Ảnh chứa chữ cần được xem ở kích thước đủ để đọc hoặc có nội dung văn bản thay thế phù hợp.

Bỏ width cố định là một phần giải pháp, không thay thế ảnh nguồn hợp lý. Không tải một ảnh khổng lồ chỉ để hiện một thumbnail; responsive images thuộc bước tối ưu tiếp theo.

Bảng rộng nên có vùng cuộn riêng

Bảng so sánh nhiều cột có thể cần chiều rộng tối thiểu để các ô không trở nên khó đọc. Bọc trong một vùng overflow-x:auto giúp cuộn bảng mà không bắt toàn trang kéo ngang. Nếu đặt tabindex để người dùng bàn phím tiếp cận vùng cuộn, hãy cho vùng đó nhãn và focus rõ.

Không chuyển mọi bảng thành các khối không còn quan hệ tiêu đề chỉ để nhìn gọn. Với bảng phức tạp, cần lựa chọn trình bày và khả năng tiếp cận được kiểm tra kỹ hơn.

Tìm phần tử gây tràn thực sự

Một code block, input, min-width lớn hoặc URL không ngắt đều có thể làm trang rộng hơn viewport. DevTools giúp đo hộp và xác định quy tắc gây tràn. Với nội dung trong Flex/Grid, kiểm tra min-size của item và track.

Ví dụ giữ bảng rộng trong vùng riêng, menu có thể wrap và chuỗi dài được ngắt. Khi sửa, kiểm tra thông tin có còn đủ và thao tác có thực hiện được, thay vì chỉ nhìn xem thanh cuộn ngoài đã biến mất chưa.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<div class="table-region" tabindex="0" role="region" aria-label="Bảng so sánh lộ trình, có thể cuộn ngang"><table><caption>Ba môn học liên tiếp</caption><thead><tr><th scope="col">Môn</th><th scope="col">Kết quả</th><th scope="col">Cách thực hành</th></tr></thead><tbody><tr><th scope="row">HTML</th><td>Tổ chức nội dung</td><td>Website ba trang</td></tr><tr><th scope="row">CSS</th><td>Giao diện responsive</td><td>So sánh trước/sau</td></tr><tr><th scope="row">JavaScript</th><td>Hành vi theo chương trình</td><td>Thao tác DOM và sự kiện</td></tr></tbody></table></div>

Thêm hoặc sửa trong styles.css

@media (max-width: 34rem) {
  .site-header { align-items: stretch; }
  .site-nav { width: 100%; }
  .site-nav a { flex: 1 1 auto; text-align: center; }
}
.table-region { max-width: 100%; overflow-x: auto; margin-block: 1rem; }
.table-region table { min-width: 36rem; border-collapse: collapse; }
.table-region th, .table-region td { border: 1px solid #b8cada; padding: .6rem; text-align: left; }
.long-content { overflow-wrap: anywhere; }
.table-region:focus-visible { outline: 3px solid #175f82; outline-offset: 3px; }

So sánh trước và sau

Ở cửa sổ hẹp, bảng có thể cuộn trong vùng riêng; toàn bộ trang không cần rộng bằng bảng. Menu vẫn hiện đầy đủ, không có nút hamburger thiếu chức năng.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Ẩn overflow của body để giấu bảng: tạo vùng cuộn đúng phần tử.
• Ẩn menu mà không có cách mở: giữ điều hướng dùng được.
• Giảm font cực nhỏ để vừa bảng: giữ khả năng đọc và cho cuộn khi phù hợp.

Tự kiểm tra

• Dùng bàn phím focus vùng bảng rồi thử cuộn.
• Kiểm tra một chuỗi dài và một ảnh lớn không làm cả trang tràn.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML