Bạn sẽ bắt đầu từ bố cục dùng được ở màn hình nhỏ, rồi thêm các thay đổi khi nội dung có đủ không gian. Breakpoint được chọn theo nhu cầu của thành phần, không chỉ theo tên một loại điện thoại.

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.

Responsive không phải thu nhỏ toàn bộ desktop

Một bố cục ba cột không nên chỉ giảm mọi kích thước theo cùng tỷ lệ để nhét vào điện thoại. Có thể phải đổi số cột, cách xuống dòng và giới hạn ảnh, trong khi chữ vẫn cần đọc được. Nội dung có thứ tự đúng từ HTML giúp các thay đổi này dễ hơn.

Thẻ viewport phù hợp ở head là điều kiện nền tảng cho nhiều trang mobile. Nó không tự làm CSS linh hoạt và không nên được dùng để cấm người dùng zoom.

Quy tắc nhỏ trước, mở rộng sau

Mobile-first thường bắt đầu bằng quy tắc cơ sở đơn giản như một cột. Khi có đủ chỗ, @media (min-width:…) thêm layout rộng hơn. Cách này giúp bản cơ sở vẫn dùng được khi điều kiện mở rộng chưa khớp.

Không có một bộ breakpoint bắt buộc cho mọi website. Thu hẹp dần đến khi nội dung không còn hợp lý, rồi chọn điểm thay đổi. Một menu ngắn và một bảng nhiều cột có thể cần các quyết định khác nhau.

Media query kiểm tra điều kiện nào?

Width query thường xét viewport của môi trường tài liệu. Trong iframe, đó là viewport của khung, không phải toàn màn hình máy bạn. Vì vậy một bản demo nhúng trong bài có thể hiện một cột dù cửa sổ desktop bên ngoài rất rộng.

Khi muốn kiểm tra bố cục desktop thật, mở ví dụ trong tab riêng. Đừng thêm breakpoint nhỏ hơn chỉ để ép giao diện trong iframe giống hình desktop mà làm sai nhu cầu thực tế.

Kiểm tra hơn một kích thước

Thử một màn hình hẹp, một vùng trung gian và một vùng rộng; kéo qua breakpoint để phát hiện bước nhảy gây khó chịu. Thử text zoom và nội dung dài. Responsive gồm khả năng đọc và thao tác, không chỉ số cột.

Container queries là một hướng hữu ích cho thành phần theo kích thước vùng chứa, nhưng ở bài này tập trung media queries để nắm cơ chế trước. Không cần đưa mọi tính năng mới vào bài đầu tiên về responsive.

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="responsive-sample"><section><h3>Màn hình nhỏ trước</h3><p>Nội dung theo một cột để đọc thuận tiện.</p></section><section><h3>Đủ chỗ thì mở rộng</h3><p>Hai cột chỉ xuất hiện khi điều kiện đủ rộng.</p></section></div>

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

.responsive-sample { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.responsive-sample > section { padding: 1rem; background: #e9f4ff; border-radius: .5rem; }
@media (min-width: 42rem) { .responsive-sample { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem); line-height: 1.15; }

So sánh trước và sau

Vùng mẫu bắt đầu một cột và lên hai cột khi đủ rộng. Tiêu đề có kích thước linh hoạt nhưng vẫn giới hạn dưới/trên; cần thử zoom thay vì cho rằng clamp luôn tự giải quyết khả năng đọc.

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

• Chọn breakpoint chỉ theo tên model thiết bị: kiểm tra nội dung.
• So khung iframe với toàn màn hình: mở tab riêng.
• Cấm zoom để bố cục không vỡ: sửa bố cục thay vì chặn người dùng.

Tự kiểm tra

• Kéo cửa sổ qua mốc 42rem và mô tả thay đổi.
• Tăng chữ và kiểm tra menu vẫn có thể dùng.

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