Responsive Design
Làm cho một trang hiển thị tốt trên mọi kích thước màn hình: viewport, bố cục linh hoạt, breakpoint theo nội dung và cách kiểm tra.
- Nắm 3 trụ cột của responsive: viewport, bố cục linh hoạt, media query.
- Đặt breakpoint theo nội dung thay vì theo tên thiết bị.
- Kiểm tra trang ở các bề rộng tiêu biểu và khi phóng chữ.
Responsive design là một trang, một mã nguồn, tự điều chỉnh bố cục theo bề rộng màn hình. Khác với mobile-first (thứ tự thiết kế: bắt đầu từ màn hình hẹp), responsive là kỹ thuật để trang co giãn mượt từ điện thoại nhỏ đến màn hình rộng. Hai khái niệm đi cùng nhau: thiết kế mobile-first, lập trình responsive.
Ba trụ cột
- Thẻ meta viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Thiếu thẻ này, điện thoại sẽ hiển thị trang như màn hình máy tính thu nhỏ.
- Bố cục linh hoạt: dùng CSS Grid và Flexbox, đơn vị tương đối (%, fr, rem), max-width thay cho width cố định; ảnh có max-width: 100%.
- Media query (và container query khi cần): đổi bố cục khi bề rộng đạt ngưỡng, ví dụ từ 1 cột sang 2–3 cột.
Breakpoint theo nội dung
Đừng đặt breakpoint theo tên máy (“iPhone”, “iPad”) vì kích thước thiết bị thay đổi liên tục. Hãy kéo dãn cửa sổ từ hẹp đến rộng; chỗ nào bố cục bắt đầu xấu (dòng quá dài, thẻ quá rộng, khoảng trống thừa) thì đặt breakpoint ở đó.
| Khoảng rộng (tham khảo) | Bố cục gợi ý cho Landing Page |
|---|---|
| Dưới khoảng 600 px | 1 cột, CTA rộng, bảng chuyển thành thẻ, menu thu gọn |
| Khoảng 600–900 px | Thẻ lợi ích 2 cột, Hero vẫn xếp dọc hoặc chia đôi nếu đủ chỗ |
| Khoảng 900–1.200 px | Hero chia đôi chữ – ảnh, thẻ 3 cột, bảng giá ngang |
| Trên khoảng 1.200 px | Giữ bề rộng nội dung tối đa, không kéo dãn thêm; tăng khoảng trắng hai bên |
Co giãn mượt
- Lưới thẻ dùng repeat(auto-fit, minmax(260px, 1fr)) tự đổi số cột.
- Cỡ chữ tiêu đề dùng clamp(), không nhảy đột ngột.
- Bảng nhiều cột chuyển thành thẻ trên điện thoại hoặc có vùng cuộn riêng có nhãn.
Vỡ bố cục
- Khối có width: 1200px cố định, điện thoại phải cuộn ngang.
- Ảnh vượt khung, chữ chồng lên ảnh ở màn hình vừa.
- Ẩn cả khối nội dung quan trọng trên điện thoại bằng display: none.
- Mở DevTools, chế độ thiết bị; thử các bề rộng 320, 375, 414, 768, 1024, 1440 px.
- Kéo dãn liên tục từ 320 px lên, quan sát chỗ bố cục gượng.
- Xoay ngang điện thoại thật; kiểm tra Hero và form.
- Tăng cỡ chữ hệ thống hoặc phóng trình duyệt 200%: không mất chữ, không chồng chéo.
- Kiểm tra chuỗi dài (email, đường link, tên sản phẩm dài) không làm tràn khung.
Bài tập thực hành
Kiểm tra trang của bạn ở 6 bề rộng (320, 375, 414, 768, 1024, 1440 px). Chụp màn hình mỗi bề rộng, đánh dấu chỗ bố cục gượng hoặc vỡ, ghi breakpoint bạn đề xuất và thay đổi bố cục tại đó.
Gợi ý: Trong DevTools, nhập bề rộng tùy chỉnh và kéo thanh trượt chậm. Chỗ nào dòng chữ dài quá hoặc thẻ quá rộng là ứng viên cho breakpoint.
- Không có cuộn ngang ở 320 px.
- Hero hiển thị H1 và CTA trong màn hình đầu ở mọi bề rộng điện thoại.
- Bảng và lưới thẻ đổi bố cục hợp lý.
- Phóng 200% không mất nội dung.
- Breakpoint được đặt theo nội dung, có ghi lý do.
Kiểm tra kiến thức
- Trang tải nhanh hơn
- Không có ảnh hưởng
- Trang không hiển thị được
- Điện thoại hiển thị trang như bản máy tính thu nhỏ, chữ rất bé
Xem đáp án
D. Điện thoại hiển thị trang như bản máy tính thu nhỏ, chữ rất bé — Không có viewport, trình duyệt di động giả định bề rộng màn hình máy tính rồi thu nhỏ toàn trang, làm media query không hoạt động như mong đợi.
- Theo tên từng mẫu điện thoại
- Theo chỗ nội dung bắt đầu hiển thị không tốt khi kéo dãn
- Chỉ một breakpoint 1024 px
- Không cần breakpoint
Xem đáp án
B. Theo chỗ nội dung bắt đầu hiển thị không tốt khi kéo dãn — Thiết bị thay đổi liên tục; breakpoint theo nội dung giúp trang tốt ở mọi bề rộng chứ không chỉ vài máy cụ thể.
- 320 CSS px
- 768 CSS px
- 1024 CSS px
- 1440 CSS px
Xem đáp án
A. 320 CSS px — Tiêu chí Reflow lấy mốc 320 CSS px (tương đương phóng 400% trên màn hình 1280 px) cho nội dung cuộn dọc.