Breakpoint là gì?
Breakpoint (điểm chuyển layout) là một giá trị chiều rộng màn hình được định nghĩa trước. Khi cửa sổ trình duyệt thu nhỏ hoặc phóng to vượt qua ngưỡng đó, CSS tự điều chỉnh layout để nội dung vẫn dễ đọc và dễ dùng trên thiết bị đó.
Ví dụ điển hình: màn hình rộng 1280px hiện 4 cột sản phẩm, thu xuống 768px còn 2 cột, xuống 375px thì một cột dọc. Ba cách hiển thị đó tương ứng ba vùng breakpoint khác nhau trong cùng một file CSS.
Breakpoint không hoạt động một mình. Nó phối hợp cùng media query (quy tắc CSS áp theo điều kiện màn hình) và viewport (vùng hiển thị thực của trình duyệt) để tạo ra thiết kế responsive hoàn chỉnh.
Breakpoint dùng để làm gì trong việc làm web?
Trong thực tế, breakpoint xuất hiện ở mọi dự án web responsive. Khi designer thiết kế một trang, họ thường phác thảo 2-3 phiên bản: mobile, tablet và desktop. Khi developer code, họ dùng breakpoint để xác định tại chiều rộng nào thì chuyển từ phiên bản này sang phiên bản kia.
Điểm hay là breakpoint không yêu cầu trang web tải lại. Toàn bộ quá trình chuyển layout xảy ra ngay lập tức, thuần CSS, không cần JavaScript. Người dùng thu nhỏ cửa sổ trình duyệt sẽ thấy layout thay đổi trơn tru.
Các breakpoint phổ biến nhất hiện nay là bao nhiêu?
Hầu hết dự án hiện nay chọn một trong hai bộ breakpoint từ framework phổ biến nhất: Tailwind CSS hoặc Bootstrap 5.
Tailwind CSS (v3+) dùng bộ: 640px (sm), 768px (md), 1024px (lg), 1280px (xl), 1536px (2xl). Bootstrap 5 dùng: 576px (sm), 768px (md), 992px (lg), 1200px (xl), 1400px (xxl). Hai bộ có điểm trùng ở tablet (768px) nhưng lại lệch nhau ở mobile và desktop.
Nếu dự án dùng Tailwind thì theo bộ Tailwind, dùng Bootstrap thì theo Bootstrap. Chọn nhất quán một bộ, không trộn lẫn. Trộn hai bộ vào nhau là cách chắc chắn nhất để tạo ra những lỗi layout kỳ quặc mà nguyên nhân rất khó đoán.
Breakpoint, viewport và media query khác nhau thế nào?
| Khái niệm | Là gì | Ví dụ |
|---|---|---|
| Viewport | Vùng hiển thị thực của trình duyệt | Cửa sổ Chrome đang rộng 820px |
| Breakpoint | Ngưỡng chiều rộng quy định khi nào layout đổi | 768px là ngưỡng chuyển sang layout tablet |
| Media query | Đoạn CSS áp theo điều kiện (chứa breakpoint) | @media (max-width: 768px) { ... } |
Cách ba thứ này phối hợp: viewport cho trình duyệt biết vùng hiển thị rộng bao nhiêu, media query kiểm tra xem vùng đó có khớp điều kiện không, breakpoint là con số ngưỡng trong điều kiện đó. Thiếu bất kỳ mắt xích nào thì responsive không chạy đúng.
Công cụ test breakpoint nhanh nhất
Chrome DevTools (bộ công cụ phát triển tích hợp trong Chrome) là thứ hữu ích nhất khi cần kiểm tra responsive:
- Nhấn F12 (hoặc Ctrl+Shift+I) mở DevTools
- Nhấn biểu tượng điện thoại/máy tính bảng ở góc trên trái (Toggle Device Toolbar)
- Kéo cạnh trái/phải để thay đổi chiều rộng viewport, hoặc gõ thẳng con số
Gõ thẳng số rất tiện khi cần kiểm tra đúng ngưỡng breakpoint. Ví dụ gõ 767 rồi 769 để xem layout ngay trước và ngay sau khi vượt qua ngưỡng 768px. Firefox DevTools cũng có tính năng tương tự.
Ngoài ra còn có Responsively App (ứng dụng xem web trên nhiều kích thước màn hình cùng lúc) — tiện khi cần trình khách xem cả phiên bản mobile và desktop song song trong một cửa sổ.
Người không rành kỹ thuật cần biết gì về breakpoint?
Nếu bạn đang thuê làm web và không cần đụng vào code, điều quan trọng nhất là kiểm tra web trên cả điện thoại và máy tính trước khi nghiệm thu. Mở web trên điện thoại thật: menu có hiện đúng không, chữ có bị cắt không, hình có bị vỡ không, nút bấm có đủ to để ngón tay chạm vào không.
Nếu web đẹp trên máy tính nhưng lộn xộn trên điện thoại, đó là dấu hiệu breakpoint chưa được căn chỉnh đúng. Đây là vấn đề kỹ thuật cần sửa trước khi đưa web lên chính thức, không phải thứ có thể bỏ qua.
Thiết kế theo hướng mobile first (ưu tiên mobile trước) giúp breakpoint được căn chỉnh tốt hơn từ đầu, vì người làm bắt buộc phải nghĩ từ màn hình nhỏ nhất rồi mới mở rộng ra.
Câu hỏi thường gặp về breakpoint
- Cần bao nhiêu breakpoint cho một website?
- Thông thường 3-4 breakpoint là đủ: mobile, tablet, desktop, và đôi khi thêm màn hình lớn. Thêm quá nhiều làm code phức tạp và khó bảo trì. Nếu dùng Tailwind hoặc Bootstrap, bộ breakpoint định sẵn là điểm khởi đầu tốt cho hầu hết dự án.
- Breakpoint có phải lúc nào cũng là chiều rộng màn hình không?
- Không nhất thiết. Media query còn hỗ trợ breakpoint theo chiều cao (min-height), tỉ lệ màn hình, hoặc chế độ tối/sáng (prefers-color-scheme). Tuy nhiên chiều rộng vẫn là trường hợp phổ biến nhất trong công việc hàng ngày.
- Framework CSS có tự xử lý breakpoint hộ mình không?
- Có. Cả Tailwind lẫn Bootstrap đều có bộ breakpoint định sẵn với class tiện dụng. Bạn chỉ cần dùng đúng class là layout tự co giãn, không cần viết media query thủ công. Tự viết breakpoint từ đầu thường chỉ cần khi dự án không dùng framework.
- Breakpoint của Tailwind và Bootstrap có thể dùng chung không?
- Về mặt kỹ thuật có thể, nhưng không nên. Hai bộ có giá trị khác nhau (Tailwind sm=640px, Bootstrap sm=576px), nên trộn vào nhau sẽ gây xung đột CSS khó debug, đặc biệt ở vùng 576-640px.
Muốn website hiển thị đẹp và ổn định trên mọi thiết bị, xem thêm dịch vụ thiết kế website responsive của Web22.